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]は同時には使えない。