How to get started with webpack: the simplest possible guide

Webpack calls itself a module bundler, it is a rather humble description for a rich and complex tool which so has an incredible array of features. A good understanding of webpack’s feature can help enrich your development experience, a crippled understanding can leave you frustrated and angry.

Most of the tutorials on webpack show you configurations for use with the React ecosystem. This leaves you installing a million packages, enabling webpack features that you don’t understand and confronting errors that are hard to figure out. An example:

Scroll to the very end, this can go on and on.

And this is without unit testing or linting, if both of those were enabled, it would look something like this:

Repeat after me: Although you have a tiny modularity problem, Javascript and npm, I still love you.

At this point, you are ready to write your wonderful, multi-file webpack configuration. Now, you are asked to setup dotfiles for eslint and babel followed by a setup for karma and you are done. Now you are either ready to start or too weary to continue. Any of these can go wrong and throw errors that can be difficult to debug. All of these things are very good and worthwhile but definitely not suitable for someone who is just getting started with webpack or Javascript.

Instead, I would advocate that you understand your webpack config, install only what you need and iterate to improve your development workflow.

First, install webpack in your project as a dev-dependency like this:

npm install webpack —save-dev

This is better than installing it globally because it allows for easy collaboration and duplication of development environment. Your dev-dependencies are part of your package.json, when someone clones your project off github they could get started by simply doing an `npm install` within the project.

When writing your application using modules, you can uses simpler modules to build more complex modules until you finally arrive at a module that contains the description of your application. This file is called an entry file or a main file. If you were working with nodejs on the server, you would call this module like:

node app.js

When working on a modular application meant to be used in the browser, you would bundle it using:

./node_modules/.bin/webpack ./app.js ./build/bundle.js

To understand your bundling requirements, webpack needs to be configured using an object, although webpack has a nodejs API, it is more common to use the command line tool and configure webpack using the `webpack.config.js` file. The simplest configuration requires that you specify consists of your entry file and the directory and the file that you want webpack to output the bundled file to.

It is important that you seperate your input file from the compiled bundle, you dont want to require it accidentally.

The simplest possible webpack configuration, the app.js file and all the modules it compiles are bundled into the bundle.js file in the build folder.

Now, you can run webpack using:

./node_modules/.bin/webpack

You can now include your bundle in a `html` file:

You add the bundle.js file in your html file.

Once your source code has been bundled, it is difficult to read or debug, in order to do any work with your bundled code, you need sourcemaps which help developer tools map your minified code back to an unminified state without affecting performance.

To use sourcemaps and other develop with webpack, simply use the development alias command line argument `-d`:

./node_modules/.bin/webpack -d

The command line arguments are included here , you could use the progress argument to display the status of your build and use the watch argument to automatically rebundle your modules when you make changes to your source code.

./node_modules/.bin/webpack -d —progress —watch

You might want also want to use a webserver during development. You could configure something like browser-sync to run after webpack finishes bundling and live reload your page when the bundle changes.

Instead, I would recommend that you install the webpack-dev-server and use it instead of webpack. But, first a little configuration:

Configuring the webpack-dev-server to watch your modules,, build when they change and reload them on the server
npm install webpack-dev-server — save-dev
./node_modules/.bin/webpack-dev-server

webpack-dev-server has an advanced feature called hot module replacement that you can check out when you have this basic setup working.

And one last thing before you can configure the scripts in package.json to improve your workflow:

You can run these using:

npm run lint
npm run build
npm run build:server

You can also integrate webpack with grunt or gulp instead if you prefer to do so.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.