Problem

Migrate an existent Browserify application to Webpack 2.0.

Objective

Have a new version of the previous Browserify application running now with Webpack 2.0.

Migration Process

I want to migrate a bigger application at work that currently is using Browserify and use instead Webpack 2.0 but first I would like to start with this small sandbox to understand the required effort to migrate and possible error during the migration.

Setup repository

First I created another repository in GitHub to migrate the application.

mkdir backbone-webpack
git init
git add .
git commit -m "Initial Commit"
git remote add origin https://github.com/gvazq82/backbone-webpack.git
git push -u origin master
    

Moving folders

I copied almost entirely my previous backbone-browserify application structure to the new project, including:

• index.html
• /src/*.*

Install dependencies

Instead of copying the previous package.json decided to start from a new configuration leaving the defaults.

    npm init
    

Installed Webpack and previous project dependencies.

npm install --save-dev webpack
npm install --save-dev bootstrap-sass
npm install backbone bootstrap jquery underscore
    

Configure Webpack

The first step is create a file called webpack.config.js that should contain the required Webpack configuration.

Creating bundle.js

To be able to generate the same bundle.js, it is required to define the entry file for my application and the destination folder where the file will be located, Webpack allows to define that in very simple steps and same as the previous version, I will use the file app.js as the entry point.

1
2
3
4
5
6
7
8
9
10
var path = require('path');
  
module.exports = {
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};
    

Creating Styles

In the previous versions the required styles were included in the bundle.css file and built using a gulp task, to achieve the same goal, we must need to include the required configuration for Webpack and Bootstrap; the first step is to install the required loaders.

    npm install bootstrap-sass css-loader sass-loader node-sass file-loader style-loader --save-dev
    

Then, we should include the different loaders and the corresponding mappings to properly load the files:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
rules: [ {
  test: /\.scss$/,
  use: [ {
    loader: "style-loader"
  }, {
    loader: "css-loader"
  }, {
    loader: 'sass-loader'
  } ]
}, {
  test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/,
  use: [ {
    loader: "file-loader"
  } ]
} ]
    

Since the entry point are now two different files, we must change "entry" property to become an Array.

1
2
      entry: [ './src/app.js', './src/main.scss' ]
    

Previously we had an independent generated styles file 'bundle.css', but webpack includes everything by default in bundle.js, the next should be generate an independent file for that.

Building

It is possible to execute Webpack directly from command line, but instead I defined a script in the package.json file.

1
2
3
4
    "scripts": {
  "start": "webpack --config webpack.config.js"
}
    

Execute the script command to build the bundle.

    npm run start
    

Fixing issues

After running the script, there are some warning logs in the console I should fix:

    WARNING in ./src/app/collections/Contacts.js
    There are multiple modules with names that only differ in casing.
    This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
    Use equal casing. Compare these module identifiers:
    ...
    Used by 1 module(s), i. e.
    

I was not aware one of the require sentences was incorrect and had to fix it in "/controllers/contact.js".

Summary

Migrating my previous application running with Browserify to Webpack 2.0 was an easy process having also a little background about how a RequireJS application works. My next steps about this application should be:

1. Generate bundle.css for production environments.
2. Review analytics tools provided by Webpack.
3. See if possible to load "controllers" dynamically.
4. Include developer tools similar Watchify to automatically reflect changes without refresh.
5. Run unit tests.