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:
1//...
2"my-app": {
3 "targets": {
4 "build": {
5 "executor": "@nx/webpack:webpack",
6 "options": {
7 "webpackConfig": "apps/my-app/webpack.config.js"
8 }
9 },
10 //...
11 }
12}
131nx build my-app
2Copying 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.
1//...
2"my-app": {
3 "targets": {
4 "build": {
5 "executor": "@nx/webpack:webpack",
6 "options": {
7 "webpackConfig": "apps/my-app/webpack.config.js",
8 "babelUpwardRootMode": true
9 }
10 },
11 //...
12 }
13}
14When 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:
1{ "babelrcRoots": ["*"] }
2Then for each package, you must have a .babelrc file that will be applied to that package. For example:
1{
2 "presets": ["@babel/preset-env", "@babel/preset-typescript"]
3}
4All 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.
1├── apps
2│ └── demo
3│ └── .babelrc
4├── libs
5│ ├── a
6│ │ └── .babelrc
7│ └── b
8│ └── .babelrc
9└── babel.config.json
10In 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.
The name of the main entry-point file.
The output path of the generated files.
The name of the Typescript configuration file.
Path to a function which takes a webpack config, some context and returns the resulting webpack config. See https://nx.dev/guides/customize-webpack
Base url for the application being built.
trueRead buildable libraries from source instead of building them separately. If set to false, the tsConfig option must also be set to remap paths.
Whether to set rootmode to upward. See https://babeljs.io/docs/en/options#rootmode
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
The crossorigin attribute to use for generated javascript script tags. One of 'none' | 'anonymous' | 'use-credentials'.
babel, swc, tscThe compiler to use.
Use a separate bundle containing code used across multiple bundles.
trueDelete the output path before building.
URL where the application will be deployed.
Dependencies to keep external to the bundle. (all (default), none, or an array of module names)
Extract CSS into a .css file.
Extract all licenses in a separate file, in the case of production builds only.
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.
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.
HTML File which will be contain the application.
Memory limit for type checking service process in MB.
Names the produced bundles according to their entry file.
none, all, media, bundlesDefine the output filename cache-busting hashing mode.
main.jsName of the main output file.
Log progress to the console while building.
Enable and define the file watching poll time period.
Polyfills to load before application
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.
Set a public path for assets resources with absolute paths.
Use a separate bundle containing the runtime.
Whether to rebase absolute path for assets in postcss cli resources.
Skip the type checking. Default is false.
Output sourcemaps. Use 'hidden' for use with error reporting tools without generating sourcemap comment.
External Scripts which will be included before the main application entry.
sasssass, sass-embeddedThe implementation of the SASS compiler to use. Can be either sass or sass-embedded. Defaults to sass-embedded.
Do not add a overrides and resolutions entries to the generated package.json file. Only works in conjunction with generatePackageJson option.
Do not add a packageManager entry to the generated package.json file. Only works in conjunction with generatePackageJson option.
Enables the use of subresource integrity validation.
Generates a 'stats.json' file which can be analyzed using tools such as: 'webpack-bundle-analyzer' or <https://webpack.github.io/analyse>.
falseSet 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
node, web, webworkerTarget platform for the build, same as the Webpack target option.
Use a separate bundle containing only vendor libraries.
Emits verbose output
Enable re-building when files change.