Webpack target

由于 JavaScript 既可以編寫(xiě)服務(wù)端代碼也可以編寫(xiě)瀏覽器代碼，所以 webpack 提供了多種部署 target，你可以在 webpack 的配置選項(xiàng)中進(jìn)行設(shè)置。

用法

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

webpack.config.js

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

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

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

多 target

雖然 webpack 不支持 向 ?target? 屬性傳入多個(gè)字符串，但是可以通過(guò)設(shè)置兩個(gè)獨(dú)立配置，來(lái)構(gòu)建對(duì) library 進(jìn)行同構(gòu)：

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', // <=== 默認(rèn)為 'web'，可省略
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'lib.js',
  },
  //…
};

module.exports = [serverConfig, clientConfig];

上述示例中，將會(huì)在 ?dist? 文件夾下創(chuàng)建 ?lib.js? 和 ?lib.node.js? 文件。

資源

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

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