はじめに
前回はentryオプションを記述してエントリポイントを設定する方法について紹介しました。
まだの方はこちらを参照してください。
今回はoutputオプションを記述してコンパイル後にバンドルされたJavaScriptファイルの出力先を設定するやり方について紹介していきます。
outputオプションはいろんな設定の記述方法がありますが、一般的によく使われている記述方法を紹介します。
outputオプションの指定方法が分からない方は参考にしてください。
webpackの使い方まとめについてはこちら。
web制作をする場合のwebpackのテンプレート紹介についてはこちら。
それでは説明に移ります。
ディレクトリ構成
今回のディレクトリ構成は以下です。
test
├ node_modules
├ dist
├ src
│ └ js
│ ├ another.js
│ └ index.js
├ package-lock.json
├ package.json
├ webpack.common.js
├ webpack.dev.js
└ webpack.prod.js今回はjsフォルダの中にエントリポイントとするanother.jsとindex.js という2つのjsファイルを用意しました。
指定したエントリポイントをコンパイルしてoutputオプションで設定した出力先にバンドルファイルを出力させます。
ファイル内容
今回はwebpack.common.js の記述がメインとなるので、それ以外のファイル内容を参考までに示しておきます。
another.js
console.log('another.jsです');index.js
import './another.js';
console.log('index.jsです');webpack.dev.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common(), {
mode: 'development',
devtool: 'source-map',
});webpack.prod.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common(), {
mode: 'production',
});webpack.common.jsを編集する
それではwebpack.common.jsを編集していきましょう。
const path = require('path');
module.exports = () => ({
entry: {
index: './src/js/index.js',
another: './src/js/another.js',
},
output: {
path: path.resolve(__dirname, './dist'),
filename: `./js/[name].js`,
},
});エントリポイントとその出力先を設定しました。
記述内容について説明します。
const path = require(‘path’);
pathモジュールはNode.jsで提供されている標準モジュールです。
pathモジュールを使用することでファイルパスの文字列操作ができるようになります。
path
outputオプションで出力先を設定するために使用します。
output.path
outputのpathプロパティで出力先を指定します。
出力先の指定は絶対パスで指定しないとエラーとなるので注意しましょう。
output.path
絶対パスで指定するためにpath.resolve( __dirname , 出力先 )で記述しています。
| 記述 | 内容 |
| path.resolve() | 絶対パスを返す。引数の文字列を結合していく |
| __dirname | 現在のディレクトリのパスを示す特別な変数 |
以下のような結果になります。
path.resolve(__dirname, './dist')
// => C:\Users\shuuk\OneDrive\デスクトップ\test\distoutput.filename
outputのfilenameプロパティで出力ファイルのファイル名を指定します。
filenameプロパティには自由に文字列を指定できます。
output.filename
filenameプロパティでは[name] などのプレースホルダーを使って動的に出力ファイル名を指定することができます。
よく使われるプレースホルダーには以下のようなものがあります。
| プレースホルダー | 内容 |
| [name] | entryオプションのキーの名前が割り当てられる |
| [chunkhash] | エントリポイントごとに生成されるハッシュ値 |
| [contenthash] | 1つのファイル単位ごとに生成されるハッシュ値 |
その他のプレースホルダーはこちら
コンパイルする
outputの設定が完了したのでコンパイルしてみましょう。
以下のコマンドをターミナルから打ち込みます。
npx webpack --config ./webpack.dev.js以下のようなメッセージが出力されていれば正しく実行できています。
PS C:\Users\shuuk\OneDrive\デスクトップ\test> npx webpack --config ./webpack.dev.js
asset ./js/index.js 3.55 KiB [emitted] (name: index) 1 related asset
asset ./js/another.js 250 bytes [emitted] (name: another) 1 related asset
runtime modules 937 bytes 4 modules
cacheable modules 86 bytes
./src/js/index.js 54 bytes [built] [code generated]
./src/js/another.js 32 bytes [built] [code generated]
webpack 5.61.0 compiled successfully in 127 msoutputオプションで指定した出力先にコンパイル後のバンドルファイルが出力されました。
開発環境用と本番環境用で出力するファイルを切り替える
ここまででoutputオプションを設定してコンパイル後の出力先を指定することができました。
ここから応用で開発環境用と本番環境用で出力するファイルを切り替えるやり方を紹介します。
紹介するにあたって以下のサイトを参考にさせていただいています。
webpack.common.js、webpack.dev.js、webpack.prod.jsをそれぞれ以下のように変更していきます。
webpack.common.js
const path = require('path');
module.exports = (outputFile) => ({ // 追加
entry: {
index: './src/js/index.js',
another: './src/js/another.js',
},
output: {
path: path.resolve(__dirname, './dist'),
filename: `./js/${outputFile}.js`, // 変更
},
});上記のように変更することで実行する環境によって出力するファイルを切り替えることができます。
webpack.dev.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const outputFile = '[name]'; // 追加
module.exports = merge(common(outputFile), { // 追加
mode: 'development',
devtool: 'source-map',
});開発環境用の場合に出力させるファイル名をoutputFile として、webpack.common.jsに渡してあげます。
開発環境用の場合はファイル名はなんでもかまいません。
webpack.prod.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const outputFile = '[name].[chunkhash]'; // 追加
module.exports = merge(common(outputFile), { // 追加
mode: 'production',
});本番環境用の場合も同様にファイル名を渡してあげますが、こちらはハッシュ値を用いて一意のファイル名とさせます。
コンパイルする
開発環境用と本番環境用で出力するファイル名を切り替える設定ができたのでコンパイルしてみましょう。
開発環境用で実行する場合は以下のコマンドをターミナルから打ち込みます。
npx webpack --config ./webpack.dev.js以下のようなメッセージが出力されていれば正しく実行できています。
PS C:\Users\shuuk\OneDrive\デスクトップ\test> npx webpack --config ./webpack.dev.js
asset ./js/index.js 3.55 KiB [compared for emit] (name: index) 1 related asset
asset ./js/another.js 250 bytes [compared for emit] (name: another) 1 related asset
runtime modules 937 bytes 4 modules
cacheable modules 86 bytes
./src/js/index.js 54 bytes [built] [code generated]
./src/js/another.js 32 bytes [built] [code generated]
webpack 5.61.0 compiled successfully in 118 ms本番環境用で実行する場合は以下のコマンドをターミナルから打ち込みます。
npx webpack --config ./webpack.prod.js以下のようなメッセージが出力されていれば正しく実行できています。
PS C:\Users\shuuk\OneDrive\デスクトップ\test> npx webpack --config ./webpack.prod.js
asset ./js/index.js 469 bytes [emitted] [minimized] (name: index)
asset ./js/another.js 32 bytes [emitted] [minimized] (name: another)
runtime modules 663 bytes 3 modules
cacheable modules 86 bytes
./src/js/index.js 54 bytes [built] [code generated]
./src/js/another.js 32 bytes [built] [code generated]
webpack 5.61.0 compiled successfully in 280 msそれぞれ出力されるファイル名が切り替わっているか確認してみてください。
おわりに
以上outputオプションを記述してコンパイル後にバンドルされたJavaScriptファイルの出力先を設定するやり方について紹介しました。
いかがだったでしょうか。
outputオプションの指定方法が分からない方は参考にしてください。
次回はwebpack-watched-glob-entries-pluginを使ってentryオプションを動的に複数指定するやり方について紹介します。
コメント