構建目標(Targets)

因為服務器和瀏覽器代碼都可以用 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 文件。

資源

從上面的選項可以看出有多個不同的部署目標可供選擇。下面是一個示例列表，以及你可以參考的資源。

• compare-webpack-target-bundles：有關「測試和查看」不同的 webpack target 的大量資源。也有大量 bug 報告。
• Boilerplate of Electron-React Application：一個 electron 主進程和渲染進程構建過程的很好的例子。

webpack-Targets（構建目標）