Cheatsheet Webpack

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.[contenthash].js',
  },
  mode: 'production',
};

Minimal structure.

entry: {
  app: './src/app.js',
  vendor: './src/vendor.js',
},
output: {
  filename: '[name].[contenthash].js',
  clean: true,
}

Multiple entry points.

resolve: {
  extensions: ['.js', '.jsx', '.ts'],
  alias: {
    '@': path.resolve(__dirname, 'src'),
    'components': './src/components',
  },
}

Module resolution.

devtool: 'source-map'      # full
devtool: 'eval-source-map' # fast dev
devtool: 'cheap-module-source-map'
devtool: false            # production

Source map options.

module: {
  rules: [
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader'],
    },
  ],
}

Define loaders.

{
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: { presets: ['@babel/preset-env'] }
  },
}

Transpile JavaScript.

// CSS
use: ['style-loader', 'css-loader']

// SASS
use: ['style-loader', 'css-loader',
  'sass-loader']

// Extract to file
use: [MiniCssExtractPlugin.loader,
  'css-loader']

Process styles.

{
  test: /\.(png|svg|jpg|gif)$/,
  type: 'asset',
  parser: {
    dataUrlCondition: {
      maxSize: 8 * 1024
    }
  }
}

Asset modules (Webpack 5).

new HtmlWebpackPlugin({
  template: './src/index.html',
  title: 'My App',
  minify: { collapseWhitespace: true },
})

Generate HTML with bundles.

new MiniCssExtractPlugin({
  filename: 'css/[name].[contenthash].css',
})

Extract CSS to files.

new webpack.DefinePlugin({
  'process.env.API_URL':
    JSON.stringify(process.env.API_URL),
  __DEV__: JSON.stringify(true),
})

Compile-time variables.

new CopyPlugin({
  patterns: [
    { from: 'public', to: '' }
  ],
})

output: { clean: true }

Copy static assets.

devServer: {
  port: 3000,
  hot: true,
  open: true,
  historyApiFallback: true,
  proxy: [{
    context: ['/api'],
    target: 'http://localhost:8080',
  }],
}

Development server.

devServer: { hot: true }

// In the code:
if (module.hot) {
  module.hot.accept('./app', () => {
    render();
  });
}

Update without reload.

"scripts": {
  "dev": "webpack serve --mode development",
  "build": "webpack --mode production",
  "watch": "webpack --watch",
  "analyze": "webpack --profile --json > stats.json"
}

Run scripts.

optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\/]node_modules[\/]/,
        name: 'vendors',
      }
    }
  }
}

Split bundles.

// Lazy loading routes
const Page = React.lazy(
  () => import('./pages/Home')
);

// webpackChunkName
import(/* webpackChunkName: "admin" */
  './Admin');

Dynamic import.

optimization: {
  minimize: true,
  minimizer: [
    new TerserPlugin(),
    new CssMinimizerPlugin(),
  ],
}

Minify JS and CSS.

// module's package.json:
"sideEffects": false

// or specific:
"sideEffects": ["*.css"]

// mode: 'production' enables it automatically

Remove unused code.

npx webpack           # build
npx webpack serve      # dev server
npx webpack --watch   # watch mode
npx webpack --config webpack.prod.js

Run webpack.

--mode production
--mode development
--entry ./src/main.js
--output-path ./build
--stats verbose
--progress

Command-line options.

npm i -D webpack-bundle-analyzer

new BundleAnalyzerPlugin()

// or:
npx webpack --profile --json > stats.json
npx webpack-bundle-analyzer stats.json

Visualize bundle size.