webpack outputプロパティ

outputプロパティとは

バンドルファイルのパスと名前を設定するもの。

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js'
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  }
};

// ./dist/main.jsが生成される

__dirname⋯プロジェクトのルートディレクトリの絶対パスの文字列が入った特別な変数。

path⋯Node.jsモジュールでデフォルトで使える。
これは第一引数と第二引数のパスの文字列を繋げて、新たにパスを作る。
指定するパスがOSによって異なることを防ぐために使用する。
/hoge/distのように展開される。参考
（path: `${__dirname}/dist`このように指定してもいい）

pathプロパティの省略

pathプロパティを省略することもできる。
=> プロジェクトのルートディレクトリ直下のdistディレクトリ配下に生成される。

webpack.config.js

module.exports = {
  output: {
    filename: 'foo.js'
  }
};

// ./dist/foo.jsが生成される

複数のエントリーポイントをそれぞれ出力したい場合

webpack.config.js

const path = require("path");

module.exports = {
  entry: {
    foo: './src/foo.js',
    bar: './src/bar.js'
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js"
  }
};

// ./dist/foo.jsと./dist/bar.jsが生成される

[name]プレースホルダーにはentryのキーがそれぞれ入る。
（この場合はoutputプロパティを省略しても結果は変わらない）

他には以下のようなプレースホルダーがある。

• [id]⋯entryオブジェクト内でのインデックス値
• [hash]⋯バンドル全体で生成されたハッシュ値
• [chunkhash]⋯エントリーポイントごとに生成されたハッシュ値
• more

つまりこのような設定ファイルだと

webpack.config.js

const path = require("path");

module.exports = {
  entry: {
    foo: "./src/bar.js",
    baz: "./src/qux.js"
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[id]-[name]-[hash].js"
  }
};

このように出力される。

[hash]と[chunkhash]は同時には使えない。