Webpack target

由于 JavaScript 既可以編寫服務端代碼也可以編寫瀏覽器代碼，所以 webpack 提供了多種部署 target，你可以在 webpack 的配置選項中進行設置。

用法

想設置 ?target? 屬性，只需在 webpack 配置中設置 target 字段：

webpack.config.js

module.exports = {
  target: 'node',
};

在上述示例中，target 設置為 ?node?，webpack 將在類 Node.js 環(huán)境編譯代碼。(使用 Node.js 的 ?require? 加載 chunk，而不加載任何內置模塊，如 ?fs? 或 ?path?)。

每個 target 都包含各種 deployment（部署）/environment（環(huán)境）特定的附加項，以滿足其需求。具體請參閱 target 可用值。

多 target

雖然 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? 文件夾下創(chuàng)建 ?lib.js? 和 ?lib.node.js? 文件。

資源

從上面選項可以看出，你可以選擇部署不同的 target。下面是可以參考的示例和資源：

• compare-webpack-target-bundles：測試并查看 webpack target 的絕佳資源。同樣包含錯誤上報。
• Boilerplate of Electron-React Application: 一個關于 electron 主進程和渲染進程構建過程的優(yōu)秀示例。