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.

Angular

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

In your project.json configuration for the @nrwl/web:webpack or @nrwl/node:webpack 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:

// Helper for combining webpack config objects const { merge } = require('webpack-merge'); module.exports = (config, context) => { return merge(config, { // overwrite values here }); };

Also supports async functions

// Utility function for sleeping const sleep = (n) => new Promise((resolve) => setTimeout(resolve, n)); module.exports = async (config, context) => { await sleep(10); return merge(config, { // overwrite values here }); };

Add a Loader

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

npm install -save-dev css-loader
const { merge } = require('webpack-merge'); module.exports = (config, context) => { return merge(config, { module: { rules: [ { test: /\.css$/i, use: ['style-loader', 'css-loader'], }, ], }, }); };

Module Federation

If you use the Module Federation support from @nrwl/angular or @nrwl/react then you can customize your webpack configuration as follows.

const { merge } = require('webpack-merge'); const withModuleFederation = require('@nrwl/react/module-federation'); // or `const withModuleFederation = require('@nrwl/angular/module-federation');` module.exports = async (config, context) => { const federatedModules = await withModuleFederation({ // your options here }); return merge(federatedModules(config, context), { // overwrite values here }); };

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

Next.js Applications

Next.js supports webpack customization in the next.config.js file.

const { withNx } = require('@nrwl/next/plugins/with-nx'); const nextConfig = { webpack: ( config, { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack } ) => { // Important: return the modified config return config; }, }; return withNx(nextConfig);

Read the official documentation for more details.

Concepts

Recipes

Reference