Optimization
Since version 4 webpack runs optimizations for you depending on the chosen mode, still all optimizations are available for manual configuration and overrides.
optimization.minimize
boolean
Tell webpack to minimize the bundle using the UglifyjsWebpackPlugin.
This is true by default in production mode.
webpack.config.js
module.exports = {
//...
optimization: {
minimize: false
}
};
Learn how mode works.
optimization.minimizer
UglifyjsWebpackPlugin | [UglifyjsWebpackPlugin]
Allows you to override the default minimizer by providing a different one or more customized UglifyjsWebpackPlugin instances.
webpack.config.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
//...
optimization: {
minimizer: [
new UglifyJsPlugin({ /* your config */ })
]
}
};
optimization.splitChunks
object
By default webpack v4+ provides new common chunks strategies out of the box for dynamically imported modules. See available options for configuring this behavior in the SplitChunksPlugin page.
optimization.runtimeChunk
object string boolean
Setting optimization.runtimeChunk to true adds an additonal chunk to each entrypoint containing only the runtime.
It is possible to use preset mode of the plugin by providing a string value:
single: creates a runtime file to be shared for all generated chunks.multiple: creates multiple runtime files for common chunks.
By setting optimization.runtimeChunk to object it is only possible to provide the name property which stands for the name or name factory for the runtime chunks.
Default is false: each entry chunk embeds runtime.
Imported modules are initialized for each runtime chunk separately, so if you include multiple entrypoints on a page, beware of this behavior. You will probably want to set it tosingleor use another configuration that allows you to only have one runtime instance.
webpack.config.js
module.exports = {
//...
optimization: {
runtimeChunk: {
name: entrypoint => `runtimechunk~${entrypoint.name}`
}
}
};
optimization.noEmitOnErrors
boolean
Use the optimization.noEmitOnErrors to skip the emitting phase whenever there are errors while compiling. This ensures that no erroring assets are emitted. The emitted flag in the stats is false for all assets.
webpack.config.js
module.exports = {
//...
optimization: {
noEmitOnErrors: true
}
};
If you are using webpack CLI, the webpack process will not exit with an error code while this plugin is enabled. If you want webpack to "fail" when using the CLI, please check out thebailoption.
optimization.namedModules
boolean: false
Tells webpack to use readable module identifiers for better debugging. When optimization.namedModules is not set in webpack config, webpack will enable it by default for mode development and disable for mode production.
webpack.config.js
module.exports = {
//...
optimization: {
namedModules: true
}
};
optimization.namedChunks
boolean: false
Tells webpack to use readable chunk identifiers for better debugging. This option is enabled by default for mode development and disabled for mode production if no option is provided in webpack config.
webpack.config.js
module.exports = {
//...
optimization: {
namedChunks: true
}
};
optimization.nodeEnv
string bool: false
Tells webpack to set process.env.NODE_ENV to a given string value. optimization.nodeEnv uses DefinePlugin unless set to false. optimization.nodeEnv defaults to mode if set, else falls back to "production".
Possible values:
- any string: the value to set
process.env.NODE_ENVto. - false: do not modify/set the value of
process.env.NODE_ENV.
webpack.config.js
module.exports = {
//...
optimization: {
nodeEnv: 'production'
}
};
optimization.mangleWasmImports
bool: false
When set to true tells webpack to reduce the size of WASM by changing imports to shorter strings. It mangles module and export names.
webpack.config.js
module.exports = {
//...
optimization: {
mangleWasmImports: true
}
};
optimization.removeAvailableModules
bool: true
Tells webpack to detect and remove modules from chunks when these modules are already included in all parents. Setting optimization.removeAvailableModules to false will disable this optimization.
webpack.config.js
module.exports = {
//...
optimization: {
removeAvailableModules: false
}
};
