@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": {
                ...
            },
                //...
            }
        },
    }
}
Nx 15 and lower use @nrwl/ instead of @nx/

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": {
          "babelUpwardRootMode": true,
          //...
      },
      //...
    },
    //...
  },
  //...
}
Nx 15 and lower use @nrwl/ instead of @nx/

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

Required

string

The name of the main entry-point file.

tsConfig

Required

string

The name of the Typescript configuration file.

outputPath

string

The output path of the generated files.

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]>

Default: []

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.

babelUpwardRootMode

boolean

Default: false

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

Default: babel

Accepted values: babel, swc, tsc

The compiler to use.

commonChunk

boolean

Default: true

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>]

Default: all

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

extractCss

boolean

Default: true

Extract CSS into a .css file.

extractLicenses

boolean

Default: false

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

fileReplacements

Array<fileReplacements items >

Default: []

Replace files with other files in the build.

generatePackageJson

boolean

Default: false

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

Default: true

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.

isolatedConfig

boolean

Default: false

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.).

memoryLimit

number

Default: 2048

Memory limit for type checking service process in MB.

namedChunks

boolean

Default: true

Names the produced bundles according to their entry file.

outputHashing

string

Default: none

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

Default: false

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.

runtimeChunk

boolean

Default: true

Use a separate bundle containing the runtime.

sourceMap

oneOf [boolean, string]

Default: true

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

scripts

Array<oneOf [object , string]>

Default: []

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

styles

Array<oneOf [object , string]>

Default: []

External Styles which will be included with the application

stylePreprocessorOptions

Options to pass to style preprocessors.

subresourceIntegrity

boolean

Default: false

Enables the use of subresource integrity validation.

statsJson

boolean

Default: false

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

target

platform

string

Default: web

Accepted values: node, web, webworker

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

transformers

Array<oneOf [string, object ]>

Default: []

List of TypeScript Compiler Transfomers Plugins.

vendorChunk

boolean

Default: true

Use a separate bundle containing only vendor libraries.

verbose

boolean

Default: false

Emits verbose output

watch

boolean

Default: false

Enable re-building when files change.