@nx/webpack:webpack

Build a project using webpack.

Options can be configured in project.json when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/reference/project-configuration#targets.

project.json:

//...
"my-app": {
  "targets": {
    "build": {
      "executor": "@nx/webpack:webpack",
      "options": {
        "webpackConfig": "apps/my-app/webpack.config.js"
      }
    },
    //...
  }
}

nx build my-app

Examples

Copying from the Babel documentation:

[...] if you are running your Babel compilation process from within a subpackage, you need to tell Babel where to look for the config. There are a few ways to do that, but the recommended way is the "rootMode" option with "upward", which will make Babel search from the working directory upward looking for your babel.config.json file, and will use its location as the "root" value.

Setting babelUpwardRootMode to true in your project.json will set rootMode option to upward in the Babel config. You may want the upward mode in a monorepo when projects must apply their individual .babelrc file. We recommend that you don't set it at all, so it will use the default to false as the upward mode brings additional complexity to the build process.

//...
"my-app": {
  "targets": {
    "build": {
      "executor": "@nx/webpack:webpack",
      "options": {
        "webpackConfig": "apps/my-app/webpack.config.js",
        "babelUpwardRootMode": true
      }
    },
    //...
  }
}

When babelUpwardRootMode is true, Babel will look for a root babel.config.json at the root of the workspace, which should look something like this to include all packages:

{ "babelrcRoots": ["*"] }

Then for each package, you must have a .babelrc file that will be applied to that package. For example:

{
  "presets": ["@babel/preset-env", "@babel/preset-typescript"]
}

All packages will use its own .babelrc file, thus you must ensure the right presets and plugins are set in each config file. This behavior can lead to build discrepancies between packages, so we recommend that you don't set babelUpwardRootMode at all.

├── apps
│   └── demo
│       └── .babelrc
├── libs
│   ├── a
│   │   └── .babelrc
│   └── b
│       └── .babelrc
└── babel.config.json

In workspace above, if demo imports a and b, it will apply the config libs/a/.babelrc and libs/b/.babelrc to the respective packages and not apply its own apps/demo/.babelrc to a and b. Anything in babel.config.json will apply to all packages.

Options playground

Try out this interactive editor of the configuration object. Values are validated as you type and hovering over labels will give you more information.

Options

main

string

The name of the main entry-point file.

outputPath

string

The output path of the generated files.

tsConfig

string

The name of the Typescript configuration file.

webpackConfig

string

Path to a function which takes a webpack config, some context and returns the resulting webpack config. See https://nx.dev/guides/customize-webpack

assets

Array<oneOf [object , string]>

List of static application assets.

additionalEntryPoints

Array<additionalEntryPoints items >

No description available.

baseHref

string

Base url for the application being built.

buildLibsFromSource

boolean

Default: true

Read buildable libraries from source instead of building them separately. If set to false, the tsConfig option must also be set to remap paths.

babelUpwardRootMode

boolean

Whether to set rootmode to upward. See https://babeljs.io/docs/en/options#rootmode

babelConfig

string

Path to the babel configuration file of your project. If not provided, Nx will default to the .babelrc file at the root of your project. See https://babeljs.io/docs/en/config-files

crossOrigin

string

The crossorigin attribute to use for generated javascript script tags. One of 'none' | 'anonymous' | 'use-credentials'.

compiler

string

Accepted values: babel, swc, tsc

The compiler to use.

commonChunk

boolean

Use a separate bundle containing code used across multiple bundles.

deleteOutputPath

boolean

Default: true

Delete the output path before building.

deployUrl

string

URL where the application will be deployed.

externalDependencies

oneOf [string, Array<string>]

Dependencies to keep external to the bundle. (all (default), none, or an array of module names)

extractCss

boolean

Extract CSS into a .css file.

extractLicenses

boolean

Extract all licenses in a separate file, in the case of production builds only.

fileReplacements

Array<fileReplacements items >

Replace files with other files in the build.

generatePackageJson

boolean

Generates a package.json and pruned lock file with the project's node_module dependencies populated for installing in a container. If a package.json exists in the project's directory, it will be reused with dependencies populated.

generateIndexHtml

boolean

Generates index.html file to the output path. This can be turned off if using a webpack plugin to generate HTML such as html-webpack-plugin.

index

string

HTML File which will be contain the application.

memoryLimit

number

Memory limit for type checking service process in MB.

namedChunks

boolean

Names the produced bundles according to their entry file.

outputHashing

string

Accepted values: none, all, media, bundles

Define the output filename cache-busting hashing mode.

optimization

oneOf [object , boolean]

Enables optimization of the build output.

outputFileName

string

Default: main.js

Name of the main output file.

progress

boolean

Log progress to the console while building.

polyfills

string

Polyfills to load before application

postcssConfig

string

Set a path to PostCSS config that applies to the app and all libs. Defaults to undefined, which auto-detects postcss.config.js files in each app/lib directory.

publicPath

string

Set a public path for assets resources with absolute paths.

runtimeChunk

boolean

Use a separate bundle containing the runtime.

rebaseRootRelative

boolean

Whether to rebase absolute path for assets in postcss cli resources.

sourceMap

oneOf [boolean, string]

Output sourcemaps. Use 'hidden' for use with error reporting tools without generating sourcemap comment.

scripts

Array<oneOf [object , string]>

External Scripts which will be included before the main application entry.

styles

Array<oneOf [object , string]>

External Styles which will be included with the application

stylePreprocessorOptions

Options to pass to style preprocessors.

skipOverrides

boolean

Do not add a overrides and resolutions entries to the generated package.json file. Only works in conjunction with generatePackageJson option.

skipPackageManager

boolean

Do not add a packageManager entry to the generated package.json file. Only works in conjunction with generatePackageJson option.

subresourceIntegrity

boolean

Enables the use of subresource integrity validation.

statsJson

boolean

Generates a 'stats.json' file which can be analyzed using tools such as: 'webpack-bundle-analyzer' or <https://webpack.github.io/analyse>.

standardWebpackConfigFunction

boolean

Default: false

Set to true if the webpack config exports a standard webpack function, not an Nx-specific one. See: https://webpack.js.org/configuration/configuration-types/#exporting-a-function

target

platform

string

Accepted values: node, web, webworker

Target platform for the build, same as the Webpack target option.

transformers

Array<oneOf [string, object ]>

List of TypeScript Compiler Transfomers Plugins.

vendorChunk

boolean

Use a separate bundle containing only vendor libraries.

verbose

boolean

Emits verbose output

watch

boolean

Enable re-building when files change.

isolatedConfig

Deprecated

boolean

Default: true

Do not apply Nx webpack plugins automatically. Plugins need to be applied in the project's webpack.config.js file (e.g. withNx, withReact, etc.).

Automatic configuration of Webpack is deprecated in favor of an explicit 'webpack.config.js' file. This option will be removed in Nx 20. See https://nx.dev/recipes/webpack/webpack-config-setup.