Mastering Webpack: From Zero to Advanced Configuration for Faster Development

Preface

This article shares best‑practice configurations distilled from daily work; they may not suit every project, but you can borrow useful ideas and give feedback.

Initialize Project

Initialize Project

1. mkdir test-app && cd test-app
2. npm init

Add an entry file /src/index.js and a Webpack config file webpack.config.js. The directory now looks like:

test-app
    ├── src
    │   └── index.js
    ├── package.json
    └── webpack.config.js

Install Webpack:

npm install webpack webpack-cli -D

Start Coding

Write something in src/index.js:

class Test {
  constructor() {
    document.writeTest('hello world')
  }
}
new Test()

Run the build:

npx webpack

After building you will see a dist folder containing main.js. Open the generated main.js to see the transpiled code.

Configure Babel

babel-loader

@babel/core

@babel/preset-env

@babel/plugin-transform-runtime

@babel/plugin-proposal-decorators

@babel/plugin-proposal-class-properties

@babel/plugin-proposal-private-methods

@babel/runtime

@babel/runtime-corejs3

npm install babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties @babel/plugin-proposal-private-methods @babel/runtime @babel/runtime-corejs3 -D

Update webpack.config.js to use babel-loader and add a .babelrc:

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.[contenthash:8].js'
  },
  module: {
    rules: [{
      test: /\.(jsx|js)$/,
      use: 'babel-loader',
      exclude: /node_modules/
    }]
  },
  plugins: [new HtmlWebpackPlugin({
    template: path.resolve(__dirname, './public/index.html'),
    inject: 'body',
    scriptLoading: 'blocking'
  })]
}

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    ["@babel/plugin-transform-runtime", {"corejs": 3}],
    ["@babel/plugin-proposal-decorators", {"legacy": true}],
    ["@babel/plugin-proposal-class-properties", {"loose": true}],
    ["@babel/plugin-proposal-private-methods", {"loose": true}]
  ]
}

Real‑time Update and Preview

Install webpack-dev-server and add devServer config:

npm install webpack-dev-server -D

module.exports = {
  // ...
  devServer: {
    port: '3001',
    hot: true,
    stats: 'errors-only',
    compress: true,
    proxy: {
      '/api': { target: 'http://0.0.0.0:80', pathRewrite: {'/api': ''} }
    }
  }
}

Add a script in package.json:

"dev": "webpack serve --open"

Running npm run dev opens http://localhost:3001/ and updates the browser automatically on file changes.

Sourcemap Configuration

Add devtool for better error location:

module.exports = {
  // ...
  devtool: 'eval-cheap-module-source-map'
}

Use hidden-source-map for production.

Split Environments

Create a build folder with webpack.base.js, webpack.dev.js, webpack.pre.js, and webpack.pro.js. Use webpack-merge to combine base config with environment‑specific settings.

npm install webpack-merge -D

// webpack.base.js (common)
module.exports = {
  entry: path.resolve(rootDir, 'src/index.js'),
  output: { path: path.resolve(rootDir, 'dist'), filename: 'bundle.[contenthash:8].js' },
  module: { rules: [{ test: /\.(jsx|js)$/, use: 'babel-loader', include: path.resolve(rootDir, 'src'), exclude: /node_modules/ }] },
  plugins: [new HtmlWebpackPlugin({ template: path.resolve(rootDir, 'public/index.html'), inject: 'body', scriptLoading: 'blocking' })]
}

// webpack.dev.js
const { merge } = require('webpack-merge');
const baseConfig = require('./webpack.base');
module.exports = merge(baseConfig, {
  mode: 'development',
  devtool: 'eval-cheap-module-source-map',
  devServer: { /* same as above */ }
});

// webpack.pro.js
const { merge } = require('webpack-merge');
const baseConfig = require('./webpack.base');
module.exports = merge(baseConfig, {
  mode: 'production',
  devtool: 'hidden-source-map'
});

Update scripts:

"dev": "webpack serve --config build/webpack.dev.js --open",
"build:pro": "npx webpack --config build/webpack.pro.js"

Add CSS and LESS Support

Install loaders:

npm install less style-loader css-loader less-loader -D

Update webpack.base.js:

module.exports = {
  // ...
  module: {
    rules: [
      // JS/JSX rule
      { test: /\.(le|c)ss$/, exclude: /node_modules/, use: ['style-loader', 'css-loader', 'less-loader'] }
    ]
  }
}

Import src/index.less in src/index.js and write a simple class that renders a red div.

CSS Modules

Enable CSS modules with hashed class names:

module.exports = {
  // ...
  module: {
    rules: [{
      test: /\.(le|c)ss$/,
      exclude: /node_modules/,
      use: ['style-loader', { loader: 'css-loader', options: { modules: { compileType: 'module', localIdentName: '[local]__[hash:base64:5]' } } }, 'less-loader']
    }]
  }
}

Auto‑Prefix CSS

Install PostCSS and Autoprefixer:

npm install autoprefixer postcss postcss-loader -D

Add postcss-loader after less-loader with the autoprefixer plugin.

Extract and Minify CSS

Install mini-css-extract-plugin and optimize-css-assets-webpack-plugin:

npm install mini-css-extract-plugin optimize-css-assets-webpack-plugin -D

Update rules to use MiniCssExtractPlugin.loader and add the plugins to the configuration.

Copy Static Assets

Install copy-webpack-plugin and configure it to copy files from public/js to dist/js during the build.

const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({ /* ... */ }),
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin({ patterns: [{ from: '*.js', context: path.resolve(rootDir, 'public/js'), to: path.resolve(rootDir, 'dist/js') }] }),
    new MiniCssExtractPlugin({ filename: 'css/[name].css' }),
    new OptimizeCssPlugin()
  ]
}

Asset Loader (Images, Fonts, etc.)

Webpack 5 can handle assets without extra loaders:

module.exports = {
  // ...
  module: {
    rules: [{ test: /\.(png|jpe?g|gif|webp|svg|eot|ttf|woff2?)$/, type: 'asset' }]
  }
}

Performance Optimizations

Enable persistent caching:

cache: { type: 'filesystem', buildDependencies: { config: [__filename] } }

for production and cache: { type: 'memory' } for development.

Code splitting with optimization.splitChunks set to { chunks: 'all' }.

Use mode: 'production' to activate built‑in optimizations.

Multi‑threaded builds with thread-loader (or happypack if preferred).

Thread Loader Example

npm install thread-loader -D
module.exports = {
  module: {
    rules: [{ test: /\.(jsx|js)$/, use: ['thread-loader', 'babel-loader'], exclude: /node_modules/ }]
  }
}

The article concludes with a note that many more advanced topics exist, and references are provided for deeper exploration.