目標

由於 JavaScript 可以同時撰寫給伺服器和瀏覽器使用，因此 webpack 提供多個部署目標，您可以在 webpack 組態中設定這些目標。

用法

若要設定 target 屬性，請在 webpack 組態中設定目標值

webpack.config.js

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

在上述範例中，使用 node webpack 會針對類似 Node.js 的環境進行編譯（使用 Node.js require 來載入區塊，且不會觸及任何內建模組，例如 fs 或 path）。

每個目標都有各種部署/環境特定的附加功能，以符合其需求。請參閱可用的目標。

多個目標

儘管 webpack 不支援將多個字串傳遞到 target 屬性，但您可以透過打包兩個不同的組態來建立同構函式庫

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', // <=== can be omitted as default is '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 目標的絕佳資源。也很適合回報錯誤。
• Electron-React 應用程式樣板：一個針對 electron 主處理程序和渲染處理程序的建置程序範例。