Replace Browserify with Webpack as your React build system

Mattias Wikström
Go back

For the quick-fix without the explanations; check the GitHub compare page for Davids gh-pages branch and my webpack-powered version to see an overview of how to change out Browserify for Webpack. For a more in-depth explanation of it all just keep reading.


Intro

In this post I will show you how to exchange browserify for webpack in your React project. I will be using Davids Superhero battle demo-app as an example, showing all the steps you have to take to make this substitution. But first:

Why Webpack over Browserify?

For a small project - where the the only thing you need to do is bundle up a few modules and transpile some JSX/ES2015 to vanilla JavaScript - Browserify with the Reactify plugin will do just fine. But as the project grows you might not want to put all of your code in one huge bundle? Maybe you want to bundle and minify your css, or even use a preprocessor like LESS or SASS to make your life a little easier? With webpack all of this is as easy as apple pie.

Furthermore, isn’t it kind of icky how Browserify only has command line flags for options? In webpack you put all of your options in webpack.config.js, which is just plain old JavaScript. So stop complaining about how you “don’t want mess around with some stupid config file, I wan’t to start hacking Javascript!” because the config file is JavaScript.

But ok, yes, sure - let’s stop messing around and get to it.

Installing webpack

First use this command to install webpack globally on your computer:

npm install webpack -g

Then also add it to you project, using the --save-dev to save the dependency to your package.json, like so:

npm install --save-dev webpack

Configuring webpack

With webpack installed it’s time to create our config file, so create a file called webpack.config.js in whatever way you like.

Just like with browserify we need to define an entry-point (from which file webpack should start its magic module-bundling from) and an output file to where this bundle will be saved. To match Davids browserify setup, add this to your webpack.config.js:

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js'
    }
};

Now the only missing part is a loader. Webpack uses loaders to process your files, and these loaders are your responsibility to install. So lets do it.

Installing Babel

Instead of reactify (with the --es6 flag) taking care of our JSX/ES2015 transpiling we will be using Babel. On a side-note: Babel is not at all connected to webpack, even if you stay in the browserify camp you can (and probably should) exchange reactify for babel.

To install Babel and the babel loader into our project simply run this command:

npm install --save-dev babel-loader babel-core

And add the loader settings to the config file, making it look something like this:

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    }
};

Babel presets and .babelrc

Babel is, just like Webpack, pretty bare bones out of the box and relies on you installing presets by yourself to get the funtionality you desire. The presets we need for this project are es2015 and react so install them using this command:

npm install --save-dev babel-preset-es2015 babel-preset-react

We then have to tell Babel that these are the presets to use, which is done by creating a .babelrc config file and adding the following:

{
  "presets": [
      "es2015",
      "react"
      ]
}

Try out running the webpack command - yep, no more npm run build, a simple webpack will do! - and hopefully it will execute and give you a beautiful bundle.js. Now just remove the unnecessary browserify and reactify dependencies from your package.json and we are done!

For a good overview look of the changes made, I once again recommend looking at the GitHub compare page.

Bonus: webpack-dev-server

As some extra sugar on the webpack cake there is a wonderful development server plugin called webpack-dev-server that is easily installed by running:

npm install -g webpack-dev-server

Running the webpack-dev-server command now builds your project and serves it to you on localhost:8080. For even more development awesomeness, go to localhost:8080/webpack-dev-server/ for a live-reloading version.

Last quick tip, webpack-dev-server is a bit too long of a command for my taste, so add a start script to your package.json:

// package.json
// other stuff...
scripts: {
    "start": "webpack-dev-server",
    // other scripts...
}

Now your auto-reloading super cool development server is just a short npm start away.

See you soon, cheers!