はじめに
前回はwebpackのコンパイルのやり方について説明しました。
まだの方はこちらを参照してください。
今回はwebpackのmodeオプションを指定してコンパイル方法を切り替えるやり方を紹介します。
modeオプションに開発環境用、本番環境用を指定することで出力されるバンドル後のファイル内容が大きく変わります。
オプションを指定するやり方にも複数あるので参考にしてください。
webpackの使い方まとめについてはこちら。
web制作をする場合のwebpackのテンプレート紹介についてはこちら。
それでは説明に移ります。
modeオプションとは
modeオプションは、値を指定することによってwebpackをコンパイルする方法を切り替えることができるオプションです。
modeオプションには開発環境用(development)と本番環境用(production)を指定することができます。
webpack公式
開発環境用と本番環境用のメリット・デメリット
それぞれの指定には以下のようなメリット・デメリットがあります。
開発環境用
メリット
ソースマップが出力されてデバッグしやすくなる
ビルド時間が短い
デメリット
容量が大きくなる
本番環境用
メリット
圧縮されて容量が小さくなる
難読化される
デメリット
ビルド時間が長い
開発環境用と本番環境用の違い
実際に開発環境用と本番環境用をそれぞれ指定してコンパイルしてバンドル後のファイル内容を確認してみます。
以下のindex.jsをエントリポイントとしてコンパイルします。
const hello = () => {
console.log("hello");
};
hello();開発環境用でコンパイルした場合
/*
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
* This devtool is neither made for production nor for readable output files.
* It uses "eval()" calls to create a separate source file in the browser devtools.
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
* or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/
/******/ (() => { // webpackBootstrap
/******/ var __webpack_modules__ = ({
/***/ "./src/index.js":
/*!**********************!*\
!*** ./src/index.js ***!
\**********************/
/***/ (() => {
eval("const hello = () => {\r\n console.log(\"hello\");\r\n};\r\n\r\nhello();\n\n//# sourceURL=webpack://test/./src/index.js?");
/***/ })
/******/ });
/************************************************************************/
/******/
/******/ // startup
/******/ // Load entry module and return exports
/******/ // This entry module can't be inlined because the eval devtool is used.
/******/ var __webpack_exports__ = {};
/******/ __webpack_modules__["./src/index.js"]();
/******/
/******/ })()
;本番環境用でコンパイルした場合
console.log("hello");開発環境用はなにやらいろんな記述やコメントがあるため非常にファイル容量が大きくなっています。
対して本番環境用は圧縮化されて最低限の記述のみとなっていることが分かります。
modeオプション指定方法
オプションの違いによりコンパイルされる内容が変わることが分かりました。
それではmodeオプションを指定するやり方について説明していきます。
やり方は大きく分けて以下3つあります。
それぞれのやり方を説明していきます。
webpack.config.jsでmodeオプションを指定する
webpack.config.js でmodeオプションを直接指定します。
開発環境用の指定の場合
module.exports = () => ({
mode:'development', // 開発環境用
});本番環境用の指定の場合
module.exports = () => ({
mode:'production', // 本番環境用
});こちらの指定方法が一番シンプルで理解しやすいかと思います。
ただ指定する環境がコロコロ変わる場合は何度もmodeオプションを書き換える必要があります。
コマンドでmodeオプションを指定する
コマンドでmodeオプションを指定します。
webpack.config.js にはmodeオプションの記述は削除しておきます。
開発環境用の指定の場合
npx webpack --mode development本番環境用の指定の場合
npx webpack --mode productionwebpack.config.js に直接modeオプションを指定する場合と比べてコンパイル時にmodeオプションを指定できるので便利です。
何度も長いコマンドを打ち込むのが面倒な方はpackage.jsonにコマンドを登録しておきましょう。
"scripts": {
"dev":"npx webpack --mode development",
"pro":"npx webpack --mode production"
},コマンドは以下のように変更になります。
// 開発環境用の場合
npm run dev
// 本番環境用の場合
npm run prowebpack.dev.jsとwebpack.prod.jsを作成して、modeオプションによって実行するファイルを切り替える
こちらのやり方はwebpackが推奨しているやり方になります。
webpack公式
ただこちら長くなりそうなので別記事にて紹介します。
それぞれのmodeオプションの指定方法でコンパイルを実行する
紹介した3つのどのやり方でコンパイルを実行しても結果は同じになります。
以下のようになれば正しくコンパイルできています。
開発環境用でコンパイルした場合
/*
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
* This devtool is neither made for production nor for readable output files.
* It uses "eval()" calls to create a separate source file in the browser devtools.
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
* or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/
/******/ (() => { // webpackBootstrap
/******/ var __webpack_modules__ = ({
/***/ "./src/index.js":
/*!**********************!*\
!*** ./src/index.js ***!
\**********************/
/***/ (() => {
eval("const hello = () => {\r\n console.log(\"hello\");\r\n};\r\n\r\nhello();\n\n//# sourceURL=webpack://test/./src/index.js?");
/***/ })
/******/ });
/************************************************************************/
/******/
/******/ // startup
/******/ // Load entry module and return exports
/******/ // This entry module can't be inlined because the eval devtool is used.
/******/ var __webpack_exports__ = {};
/******/ __webpack_modules__["./src/index.js"]();
/******/
/******/ })()
;本番環境用でコンパイルした場合
console.log("hello");おわりに
以上webpackのmodeオプションを指定してコンパイル方法を切り替えるやり方を紹介しました。
いかがだったでしょうか。
オプションを指定するやり方にも複数あるのでメリット・デメリットを把握しながら使い分けられるようにしましょう。
次回はwebpack.dev.jsとwebpack.prod.jsを作成して、modeオプションによって実行するファイルを切り替えるやり方について紹介します。
コメント