WebPack 构建目标

发布时间：2023-05-09 13:14:27 所属栏目：教程来源：

导读：因为服务器和浏览器代码都可以用 JavaScript 编写，所以 webpack 提供了多种构建目标(target)，你可以在你的 webpack配置中设置。

webpack 的 target 属性不要和 output.libraryTarget 属性混淆。有关 output 属性

因为服务器和浏览器代码都可以用 JavaScript 编写，所以 webpack 提供了多种构建目标(target)，你可以在你的 webpack配置中设置。

webpack 的 target 属性不要和 output.libraryTarget 属性混淆。有关 output 属性的更多信息，请查看我们的指南。

用法
要设置 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

多个 Target
尽管 webpack 不支持向 target 传入多个字符串，你可以通过打包两份分离的配置来创建同构的库：

webpack.config.js

var path = require('path');
var serverConfig = {
target: 'node',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'lib.node.js'
}
//…
};

var clientConfig = {
target: 'web', // <=== 默认是 'web'，可省略
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'lib.js'
}
//…
};

module.exports = [ serverConfig, clientConfig ];
上面的例子将在你的 dist 文件夹下创建 lib.js 和 lib.node.js 文件。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!