For nearly ten years, the question "how do I ship this project?" had one serious answer: Webpack. It is what made importing a stylesheet or an image from a JavaScript file feel ordinary.
It has lost ground on new projects, yet it still runs a huge share of the applications in service, and being able to read it remains useful.
Definition
Webpack is a Bundler: it starts from an entry point, follows the imports, applies a transformation to each type of file it meets, and writes the result into an output folder. Everything is driven from a configuration file.
// webpack.config.js
const path = require('path');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
filename: 'bundle.[contenthash].js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' },
],
},
};The mode field is worth its weight in gold: in production, Webpack switches on Minification and Tree shaking by itself, while development favors readability and rebuild speed.
Loaders and plugins, two distinct roles
| Loader | Plugin |
|---|---|
| Handles one file at a time | Acts on the build as a whole |
Declared inside module.rules | Declared inside plugins |
| Example: translating JSX with Babel | Example: generating the final HTML page |
Each rule pairs a file name pattern, written as a RegExp, with the chain of tools that must process it. Loaders inside one rule apply from right to left, which explains the unusual order of the use array.
Since Webpack 5, images and fonts no longer need a dedicated loader: the type field of a rule is enough to copy them into the output folder or inline them into the file. Many configurations still carry dependencies that have become useless.
What keeps it in place
Its strength remains its ecosystem: years of plugins covering very specific cases, and a configuration able to describe just about any pipeline. On an old and large application, that flexibility is often worth more than a rewrite.
Its weakness is the other side of the same coin. The configuration reads poorly, startup grows longer as the project grows, and Vite offers a markedly simpler experience on both counts.
Frequently asked questions
Should an existing Webpack project be migrated?
Not on principle. A migration is justified when startup delays genuinely weigh on daily work, or when nobody on the team understands the configuration any more. On a stable project whose build finishes in seconds, the effort belongs elsewhere.
Why is my build so slow?
Three causes come back again and again: a loader applied to node_modules for lack of an exclusion, an over-detailed Source map in development, and dependencies reprocessed on every rebuild. The exclude field and a cheaper devtool setting usually fix most of it.
Is Webpack used on the server too?
It can target Node.js rather than the browser, which serves for instance to prepare a function deployed at a hosting provider. The need is rarer, since a server has no network request problem when loading its own files.