4 Easy Steps to Using Webpack with Your Node.js App

Webpack is a build tool that makes working with static assets easier. Using Webpack, you can easily transform and optimize JavaScript, CSS, images and more from a single configuration. In this tutorial, we'll walk you through 4 easy steps for using Webpack with your existing Node.js web app.

Preface: What is Webpack?

Webpack is primarily a module bundler for JavaScript. It's become increasingly popular with libraries like React which rely heavily on preprocessing to package and compile ES6 into the more browser friendly ES5 syntax. Webpack is not limited to JavaScript and can also be used to compile different flavors of CSS (SASS, LESS), optimize images, etc. It features hot reloading and code splitting, resulting in a more streamlined dev experience with optimal performance for the browser.

Below are 4 easy steps to using Webpack with an existing Node.js web app. In this example, we will be using Babel to convert ES6 to ES5 using Webpack.

1) Install Packages

The first step to using Webpack is installing the necessary dependencies. Using npm you can easily install Webpack:

npm install webpack --save-dev

This will install Webpack and save it as a dev dependency in your package.json file.

Webpack relies on loaders to process and compile assets during the bundle process. For this example, we want to use the Babel loader with Webpack to convert ES6 to ES5. In order to use the Babel loader, we need to install Babel along with the it's corresponding loader and preset used with Webpack:

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

This will install Babel along with the babel-loader and babel-preset-es2015 used with Webpack.

2) Configure Webpack

Now that we have all the necessary packages installed, it's time to configure Webpack for our Node.js application. At the root directory of the project, create a webpack.config.js and give it the following contents:

var path = require('path');
var webpack = require('webpack');
module.exports = {
    entry: './public/js/main.js',
    output: {
        path: path.resolve(__dirname, 'public/js/'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            }
        ]
    }
};

This is an example of a basic configuration for Webpack. Notice how we define an entry point. This tells Webpack what we want to include in our bundle. While we've specified a single ./public/js/main.js file, you can specify an array of files to include. Also realize that the entry point specifies the top-level file to include. This means if our main.js file uses require() or import to include other modules, Webpack will process these modules as part of the bundle.

Notice how we've also included an output object. This specifies the path and name of the resulting bundle file we generate from our Webpack build. This means Webpack will take our entry point file main.js, process and bundle it, and then spit the resulting output into a bundle.js that we can reference directly in our HTML.

Within the module object, we specify the loaders to use with our Webpack build. Remember Webpack uses loaders to process the files we specify in our entry object. In this example, we've specified that we want to use the babel-loader along with the es2015 preset for converting our ES6 code to ES5.

3) Update HTML

Now that we've specified an output file, it's time to update our HTML. Specifically we want to replace our reference to the original entry file main.js with the output file we specify in our Webpack configuration:

<script src="bundle.js"></script>

Notice how we are referencing the same output file that we specify in our webpack.config.js file. Remember that you still need to reference this file the same way you would another static asset in your HTML.

4) Run Webpack

Now that webpack is configured and the resulting bundle file is referenced in the DOM, it's time to run Webpack. To run Webpack, you can simply run:

webpack

This will generate the specified bundle.js file with the converted code. If everything worked correctly, you should see something similar to the following ouput in your console:

Hash: 53a4fdfb2a82d853e503
Version: webpack 3.10.0
Time: 3924ms
        Asset     Size  Chunks             Chunk Names
    bundle.js  6.36 kB       0  [emitted]  main
bundle.js.map    11 kB       0  [emitted]  main
   [0] ./public/js/main.js 3.83 kB {0} [built]

Running with watch mode

You can optionally run webpack in watch mode so you don't have to manually run webpack every time you change an affected file. To do this, you simply add the --watch flag:

webpack --watch

Now whenever you make a change to the entry file (or one of it's referenced files), webpack will automatically run a build and update the resulting bundle.js file.

Conclusion

In this basic example, we demonstrated how to include Webpack with an existing Node.js project to perform ES6 to ES5 conversion. It's important to remember that Webpack can be used to process not only JavaScript but also CSS, images, fonts, and more. By specifying different loaders in your Webpack configuration, you can use Webpack to optimize your static assets and streamline your development process.

Your thoughts?