I have a great application developed using Backbone.js and Marionette with requirements. We use Grunt for assembly. I need to port Requirejs to Webpack, as we often see module loading time. I believe that the Webpack multi-entry approach is a better approach than converting a single page into a multi-page page using Requirejs.
In total, we have approximately 400 js files and 250 html [partial] files. Project structure
app |--modules | |-- module-A | |- model | |- collection | |- view | |- module_utils | |-- module-B | |---templates |-- module-A |- view-1.html |- view-2.html |-- module-B
The requirejs configuration file is as follows:
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'], .... } } })
Here / is a static point in the location specified in the nginx configuration to serve content like css, js etc.
To convert the same to the webpack configuration, I started with the webpack configuration file to create one file first. And do not start with multiple recordings.
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 my requirejs based application, the modules are listed as
define([ 'underscore', 'backbone', 'utils', 'core/constants', 'text!templates/common/popup-template.html' ], function(_, Backbone, Utils, Constants, template) { ... .... }
When I start webpack, I get the error message "Cannot resolve module templates / common / popup -template.html". However, this html is a partial html / template that is used in Backbone mode to create views.
In one of the sites, I saw that I needed the html-loader plugin. And then set the alias in webpack config "text": "html". And change lines like this "text! Templates / common / popup-template.html" to "[exact path] /templates/common/popup-template.html". This means that I will need to change a lot of code.
Is there a better approach for this migration?
thanks pradeep