ターゲット

JavaScriptはサーバーとブラウザの両方で記述できるため、webpackはwebpack 設定で設定できる複数のデプロイメントターゲットを提供します。

使用方法

targetプロパティを設定するには、webpack設定でターゲット値を設定します

webpack.config.js

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

上記の例では、nodeを使用すると、webpackはNode.jsのような環境での使用のためにコンパイルされます（Node.jsのrequireを使用してチャンクをロードし、fsやpathなどの組み込みモジュールには触れません）。

各ターゲットには、そのニーズに合わせて様々なデプロイメント/環境固有の追加機能とサポートがあります。利用可能なターゲットを確認してください。

複数のターゲット

webpackはtargetプロパティに複数の文字列を渡すことをサポートしていませんが、2つの別々の設定をバンドルすることで、アイソモルフィックライブラリを作成できます

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のメインプロセスとレンダラープロセスのビルドプロセスの良い例です。