Customizing Webpack Config

For most apps, the default configuration of webpack is sufficient, but sometimes you need to tweak a setting in your webpack config. This guide explains how to make a small change without taking on the maintenance burden of the entire webpack config.

Note: For Angular developers, use an executor like ngx-build-plus.

In your project.json configuration for the @nrwl/web:build or @nrwl/node:build executor, set the webpackConfig option to point to your custom webpack config file. i.e. apps/my-app/custom-webpack.config.js

The custom webpack file contains a function that takes as input the existing webpack config and then returns a modified config object. context includes all the options specified for the executor.

apps/my-app/custom-webpack.config.js:

1// Helper for combining webpack config objects
2const { merge } = require('webpack-merge');
3
4module.exports = (config, context) => {
5  return merge(config, {
6    // overwrite values here
7  });
8};

Also supports promises

1// Utility function for sleeping
2const sleep = (n) => new Promise((resolve) => setTimeout(resolve, n));
3
4module.exports = async (config, context) => {
5  await sleep(10);
6  return merge(config, {
7    // overwrite values here
8  });
9};

Add a Loader

To add the css-loader to your config, install it and add the rule.

npm install -save-dev css-loader

1const { merge } = require('webpack-merge');
2
3module.exports = (config, context) => {
4  return merge(config, {
5    module: {
6      rules: [
7        {
8          test: /\.css$/i,
9          use: ['style-loader', 'css-loader'],
10        },
11      ],
12    },
13  });
14};

Reference the webpack documentation for details on the structure of the webpack config object.