Migrating Requirejs and Backbone based application to WebPack

Question

I have a large application developed using Backbone.js and Marionette with Requirejs.We are using Grunt for build. I need to migrate Requirejs to Webpack as we are frequently seeing Module Load Timeout. I feel that multiple entry point approach of Webpack is a better approach than to convert single page to multi-page using Requirejs.

Overall we have approximately 400 js file and 250 html[partial] files. The project structure is

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

The requirejs config file appear as below:

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 /static point to location that we have specified in nginx configuration to serve content like css, js etc.

To convert the same to webpack configuration I started with webpack config file to first create single file. And not starting with the multiple entry.

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 specified like

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

...
....
}

When I run webpack, I get error "Can not resolve module templates/common/popup-template.html ". However this html is a partial html/template to used by Backbone view to create views.

In one of the sites I saw that I need to html-loader plugin. And then set an 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'. That means I will need to change lots of code.

Is there a better approach for this migration?

thanks Pradeep

Answer 1

You need text-loader plugin, not "html". You also don't need to write anything in config. Prefix text! in dependency will attach it.

Just try npm install text-loader --save-dev