Because JavaScript can be written for both server and browser, webpack offers multiple deployment targets that you can set in your webpack configuration.
The webpacktarget
property is not to be confused with theoutput.libraryTarget
property. For more information see our guide on theoutput
property.
To set the target
property, you simply set the target value in your webpack config:
webpack.config.js
module.exports = { target: 'node' };
In the example above, using node
webpack will compile for usage in a Node.js-like environment (uses Node.js require
to load chunks and not touch any built in modules like fs
or path
).
Each target has a variety of deployment/environment specific additions, support to fit its needs. See what targets are available.
Further expansion for other popular target values
Although webpack does not support multiple strings being passed into the target
property, you can create an isomorphic library by bundling two separate configurations:
webpack.config.js
const path = require('path'); const serverConfig = { target: 'node', output: { path: path.resolve(__dirname, 'dist'), filename: 'lib.node.js' } //… }; const clientConfig = { target: 'web', // <=== can be omitted as default is 'web' output: { path: path.resolve(__dirname, 'dist'), filename: 'lib.js' } //… }; module.exports = [ serverConfig, clientConfig ];
The example above will create a lib.js
and lib.node.js
file in your dist
folder.
As seen from the options above there are multiple different deployment targets that you can choose from. Below is a list of examples, and resources that you can refer to.
Need to find up to date examples of these webpack targets being used in live code or boilerplates.
© JS Foundation and other contributors
Licensed under the Creative Commons Attribution License 4.0.
https://webpack.js.org/concepts/targets