はじめに
前回はmodeオプションを指定してコンパイル方法を切り替えるやり方について説明しました。
まだの方はこちらを参照してください。
今回はwebpack.dev.jsとwebpack.prod.jsを作成して、modeオプションによって実行するファイルを切り替えるやり方を紹介します。
こちらもmodeオプションを指定してコンパイル方法を切り替えるやり方の1つになります。
webpack公式も推奨とする方法のため、これから導入する方はぜひこちらのやり方を参考にしてください。
webpackの使い方まとめについてはこちら。
web制作をする場合のwebpackのテンプレート紹介についてはこちら。
今回はこちらのサイトを参考にさせていただいています。
それでは説明に移ります。
modeオプションによって実行するファイルを切り替えるメリット
まずはmodeオプションによって実行するファイルを切り替えるメリットについて説明しておきます。
webpackではmodeオプションの違いによって、出力するファイル名や使用するプラグインを変更させる場合が多いです。
そのたびに条件分岐を追加して、「もし開発環境用ならこっち・・・、もし本番環境用ならあっち」というようにしてしまうと非常にプログラムの見通しが悪くなります。
そうならないためにwebpackの公式では以下のようにファイルを分割すること推奨しています。
| ファイル名 | 内容 |
| webpack.common.js | どちらの環境でも実行する内容を記述するファイル |
| webpack.dev.js | 開発環境で実行する内容を記述するファイル |
| webpack.prod.js | 本番環境で実行する内容を記述するファイル |
開発環境で実行したい場合は、webpack.dev.js + webpack.common.js を実行、
本番環境で実行したい場合は、webpack.prod.js + webpack.common.js を実行させるという考え方ですね。
ディレクトリ構成
今回のディレクトリ構成は以下です。
test
├ node_modules
├ src
│ └ index.js
├ package-lock.json
├ package.json
├ webpack.common.js
├ webpack.dev.js
└ webpack.prod.js前回同様最小限の構成にしようと思うのでエントリポイントは指定しません。
指定しない場合は ./src/index.js がデフォルトのエントリポイントとして指定されます。
ファイル内容
index.jsの中身を適当に記述しておきます。
const hello = () => {
console.log("hello");
};
hello();共通ファイルのwebpack.common.jsのファイル内容を記述します。
webpack.common.js
module.exports = () => ({
});最小限の構成にすると特に書くことがありませんね。
続いてwebpack.dev.jsとwebpack.prod.jsのファイル内容です。
webpack.dev.js や webpack.prod.js を実行する場合に webpack.common.js に取り込ませる必要があります。
こちらを解決してくれるプラグインがwebpack-mergeとなるので、このプラグインを読み込んでいます。
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',
});コンパイルを実行させる
それでは開発環境用と本番環境用でコンパイルを実行させていきましょう。
ターミナルからコマンドを実行させます。
開発環境用でコンパイル
npx webpack --config ./webpack.dev.js以下のような表示がされれば正しく実行できています。
asset main.js 262 bytes [emitted] (name: main) 1 related asset
./src/index.js 62 bytes [built] [code generated]
webpack 5.61.0 compiled successfully in 129 ms本番環境用でコンパイル
npx webpack --config ./webpack.prod.js以下のような表示がされれば正しく実行できています。
asset main.js 21 bytes [emitted] [minimized] (name: main)
./src/index.js 62 bytes [built] [code generated]
webpack 5.61.0 compiled successfully in 334 mspackage.jsonにコマンドを登録する
先ほどのコマンドを毎回ターミナルに打ち込むのは面倒なのでpackage.jsonにコマンドを登録していきましょう。
"scripts": {
"dev": "npx webpack --config ./webpack.dev.js",
"pro": "npx webpack --config ./webpack.prod.js"
},コマンドは以下のように変更になります。
// 開発環境用の場合
npm run dev
// 本番環境用の場合
npm run proおわりに
以上webpack.dev.jsとwebpack.prod.jsを作成して、modeオプションによって実行するファイルを切り替えるやり方を紹介しました。
いかがだったでしょうか。
実行する環境でファイルを分けることによって非常に見通しが良いプログラムになります。
これから導入する方はぜひこちらのやり方を参考にしてください。
次回はentryオプションを設定する方法について紹介していきます。
コメント