因为服务器和浏览器代码都可以用 JavaScript 编写,所以 webpack 提供了多种部署 target(目标),你可以在你的 webpack 配置对象 中进行设置。
想要设置 target
属性,只需要在你的 webpack 配置中设置 target 的值。
webpack.config.js
module.exports = {
target: 'node'
};
在上面例子中,使用 node
,webpack 会编译为用于类 Node.js 环境(使用 Node.js 的 require
,而不是使用任意内置模块(如 fs
或 path
)来加载 chunk)。
每个 target 都有各种部署(deployment)/环境(environment)特定的附加项,以支持满足其需求。查看 target 可用值。
Further expansion for other popular target values
虽然 webpack 不支持向 target
传入多个字符串,还是可以通过打包两个单独配置,来创建出一个同构的 library:
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', // <=== 默认是 'web',可省略
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'lib.js'
}
//…
};
module.exports = [ serverConfig, clientConfig ];
上面的例子将在 dist
文件夹下创建 lib.js
和 lib.node.js
文件。
从上面的选项能够看出,可以选择多种不同的部署 target。下面是一个示例列表,以及可以参考的资源。
Need to find up to date examples of these webpack targets being used in live code or boilerplates.