Migrieren von Requirejs und Backbone-basierten Anwendungen zu WebPack

Question

Ich habe eine große Anwendung mit Backbone.js und Marionette mit Requirejs entwickelt. Wir verwenden Grunt für Build. Ich muss Requirejs zu Webpack migrieren, da wir häufig Modullade-Timeout sehen. Ich denke, dass der Einstiegspunkt-Ansatz von Webpack ein besserer Ansatz ist, als eine einzelne Seite mit Requirejs in mehrere Seiten umzuwandeln.

Insgesamt haben wir ca. 400 js Datei und 250 HTML [teilweise] Dateien. Die Projektstruktur ist

app 
    |--modules 
    |  |-- module-A 
    |  |- model 
    |  |- collection   
    |  |- view 
    |  |- module_utils 
    |  |-- module-B 
    | 
    |---templates 
     |-- module-A 
     |- view-1.html 
     |- view-2.html   
     |-- module-B 

Die requirejs Konfigurationsdatei wie folgt aussehen:

require.config({ 
    paths: { 
     templates: "./../templates", 
     jquery: "/static/lib/jquery/jquery.min", 
     jquerymigrate: "/static/lib/jquery/jquery-migrate.min", 
     jqueryui: "/static/lib/jqueryui/ui/minified/jquery-ui.custom.min", 
     bootstrap: "/static/lib/bootstrap-3.1.1/dist/js/bootstrap", 
     ... 

    }, 

    shim: { 
     'jquerymigrate': ['jquery'], 
     'jquerybackstretch': ['jquery'], 
     'jqueryuniform': ['jquery'], 
     'jqueryui': ['jquery','jquerymigrate'], 
     'bootstrap': ['jquery'], 
     .... 
     } 
    } 
}) 

Hier/static Punkt Position, die wir in nginx Konfiguration angegeben haben, Inhalte wie CSS zu dienen, js usw.

Um diese in die Webpack-Konfiguration zu konvertieren, habe ich mit der webpack-Konfigurationsdatei begonnen, um zuerst eine einzelne Datei zu erstellen. Und nicht mit dem Mehrfacheintrag beginnen.

var webpack = require("webpack"); 
var path = require("path"); 

module.exports = { 
    entry: "./app.js", 
    output: { 
     path: __dirname, 
     filename: "bundle.js" 
    }, 
    resolve: { 
     alias: { 
      "templates": "./../templates", 
      "jquery": "../../lib/jquery/jquery.min", 
      "jquerymigrate": "./..//lib/jquery/jquery-migrate.min", 
      "jqueryui": "../../lib/jqueryui/ui/minified/jquery-ui.custom.min", 
      "bootstrap": "../../lib/bootstrap-3.1.1/dist/js/bootstrap", 
      "moment": "../../lib/moment/min/moment.min", 
      .... 

     } , 
     extensions: ['', '.js'], 
     modulesDirectories: [ __dirname], 
     root: [path.resolve('./../app/modules/')] 

    } 
} 

function escapeRegExpString(str) { return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); } 
function pathToRegExp(p) { return new RegExp("^" + escapeRegExpString(p)); } 

In meiner requirejs basierten Anwendung werden die Module wie

define([ 
    'underscore', 
    'backbone', 
    'utils', 
    'core/constants', 
    'text!templates/common/popup-template.html' 
], function(_, Backbone, Utils, Constants, template) { 

... 
.... 
} 

angegeben Als ich webpack laufen lasse, erhalte ich Fehler "nicht Modul templates/common/Popup-template.html lösen können". Allerdings ist diese HTML-Datei eine teilweise HTML/Vorlage, die von der Backbone-Ansicht zum Erstellen von Ansichten verwendet wird.

In einer der Seiten sah ich, dass ich html-loader-Plugin brauche. Legen Sie dann einen Alias ​​in der Webpack-Konfiguration "text": "html" fest. Und ändere Zeilen wie diese 'text! Templates/common/popup-template.html' zu '[exact path] /templates/common/popup-template.html'. Das bedeutet, dass ich viel Code ändern muss.

Gibt es einen besseren Ansatz für diese Migration?

dank Pradeep

Answer 1

Sie text-loader Plugin benötigen, nicht "html". Sie müssen auch nichts in der Konfiguration schreiben. Präfix text! in Abhängigkeit wird es anhängen.

Probieren Sie npm install text-loader --save-dev