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 file means that Nx will set the rootMode option to upward in the Babel configuration. This may be useful in some cases, however we recommend that you don't set it at all, so it will use the default to false.

Setting babelUpwardRootMode to true will cause issues in the case where you are importing a library (which does NOT have a .babelrc file) in an application which uses webpack to build. When Nx is trying to build the application, it will also build the library, and it will try to find a .babelrc file for that library, which it will not. This will cause the build to fail. So, in that case, it is better to either specify the path to the .babelrc file in your webpack application, using the babelConfig option or to not set babelUpwardRootMode at all, in which case Nx will infer the path to the .babelrc file for your application.

//... "my-app": { "targets": { //... "build": { "executor": "@nx/webpack:webpack", //... "options": { //... "babelUpwardRootMode": true, }, "configurations": { ... } }, } }
Nx 15 and lower use @nrwl/ instead of @nx/

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

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

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

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.