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:
And this is without unit testing or linting, if both of those were enabled, it would look something like this:
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:
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.
Now, you can run webpack using:
You can now include your bundle in a `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`:
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:
npm install webpack-dev-server — save-dev
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