BETA

[webpack]webpackのビルドをnpm runコマンドでモードを切り替えて実行させる

投稿日:2020-06-28
最終更新:2020-06-28

webpackのビルド実行コマンド

通常webpackはビルド時に以下のコマンドを実行します。

$ npx webpack  

特別長いコマンドではないですが、1つ問題があります。
それがwebpack.config.jsのmodeオプション。

mode 概要
development minify化をせずエラー表示もされる主に開発用モード
production minify化、変数置き換えによる難読化も実施される主に公開用モード
none minify化、変数置き換え、エラー表示等全て無効になるモード

基本的にこれらのうち1つをwebpack.config.jsに設定しますが、

  • 開発中→development
  • 開発が終わり公開→production
  • 公開して新機能作成→development
  • 新機能が開発できた→production

・・・なんて一々書き換えてたら面倒ですよね笑。

という事でこれをコマンド一発で使い分けできるように設定していきましょう!

コマンドの概要

今回はそれぞれ以下のようにコマンド作成していきます。

コマンド 該当するオプション 役割
dev development 開発用モード、オートリロード不要でバンドル時のみに使用
watch development 開発用モード、ターミナル上で常駐してファイル変更を検知し自動ビルド
build production 公開用モード

それぞれ以下のように使用します。

//dev  
$ npm run dev  

//watch  
$ npm run watch  

//build  
$ npm run build  

devとwatchはどちらか片方で良いかも知れません。
ただ簡単なタイポでサッと修正してすぐにビルドしてgit pushしたい、みたいな時には常駐させる必要がないので個人的にはあっても良いかなと思います。

ちなみにdev、watch、buildはよく使われる分かりやすい名前というだけでオリジナルのネーミングでも構いません。
そんな事するやつは1人もいないと思いますが、やろうと思えばnpm run 太郎とかでもいけます笑。

webpack.config.jsからmodeを削除

もし既にwebpack.config.jsにmodeを設定している場合、必ず削除してから以下の手順を実施して下さい。
基本的に以下で作成するコマンドよりも、webpack.config.jsに書いてあるmodeの方が優先されます。

つまりコマンドでは$ npm webpack buildとproductionを実行しているのに、webpack.config.jsにdevelopmentと記載があった場合出力されるのはdevelopmentに準じます。

const path = require('path');  

module.exports = {  
    //mode: 'development',    //削除もしくはコメントアウトする  
    entry: './src/index.js',  
~略~  

package.jsonの編集

それではpackage.jsonを編集して設定していきましょう!

{  
  "name": "webpackproject",  
  "version": "1.0.0",  
  "description": "",  
  "main": "index.js",  
  "scripts": {  
    "test": "echo \"Error: no test specified\" && exit 1",  
  },  
~略~  

package.jsonはインストール時にこんな感じの構成になっています。
scriptディレクティブ内にそれぞれのコマンドの役割を定義していきます。

{  
  "name": "webpackproject",  
  "version": "1.0.0",  
  "description": "",  
  "main": "index.js",  
  "scripts": {  
    "test": "echo \"Error: no test specified\" && exit 1",  
    "dev": "webpack --mode development",  
    "watch": "webpack --mode development --watch",  
    "build": "webpack --mode production",  
  },  

こんな感じでそれぞれのコマンドを設定します。
以降、npx webpackコマンドではなくnpm run xxxを使って必要に応じて動かしましょう。

dev

devを実行すると以下のような出力が表示されます。

$ npm run dev  
> [email protected] dev C:\Users\ユーザー名\Desktop\webpackProject  
> webpack --mode development  

Hash: e5868422beb94af13904  
Version: webpack 4.43.0  
Time: 64ms  
Built at: 2020-06-27 23:31:14  
    Asset      Size  Chunks             Chunk Names  
bundle.js  4.64 KiB    main  [emitted]  main         
Entrypoint main = bundle.js  
[./src/index.js] 67 bytes {main} [built]  
[./src/js/taxCalc.js] 89 bytes {main} [built]   

3行目にはしっかり--mode developmentが指定されています。

出力されるbundle.jsは以下のようになります。

~略~  
/***/ "./src/index.js":  

/*!**********************!*\  
  !*** ./src/index.js ***!  
  \**********************/  
/*! no exports provided */  
/***/ (function(module, __webpack_exports__, __webpack_require__) {  

"use strict";  
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _js_taxCalc_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./js/taxCalc.js */ \"./src/js/taxCalc.js\");\n\r\n\r\nalert(Object(_js_taxCalc_js__WEBPACK_IMPORTED_MODULE_0__[\"taxCalc\"])(400));\r\n\n\n//# sourceURL=webpack:///./src/index.js?");  

/***/ }),  

/***/ "./src/js/taxCalc.js":  
~略~  

開発用モードなので当然minify化されていないコードが出力されていますね。

watch

watchを実行すると以下のような出力が表示されます。

$ npm run watch  
> [email protected] watch C:\Users\ユーザー名\Desktop\webpackProject  
> webpack --mode development --watch  


webpack is watching the files…  

Hash: 30b019045e5f38ee5323  
Version: webpack 4.43.0  
Time: 67ms  
Built at: 2020-06-27 23:35:52  
    Asset      Size  Chunks             Chunk Names  
bundle.js  4.66 KiB    main  [emitted]  main  
Entrypoint main = bundle.js  
[./src/index.js] 89 bytes {main} [built]  
[./src/js/taxCalc.js] 89 bytes {main} [built]  

今度は3行目に--watchが指定されています。
そしてその下、webpack is watching the files…となっており常駐して監視しています。
もちろん変更を加えれば常駐している間何度でもオートビルドしてくれます。
出力されるbundle.jsは基本的にdevと同一です。

なお常駐はWindowsはctrl+cMacはcommand+cで解除可能です。

と、ここまで言っておきながらなんですが、通常は別途解説予定のwebpack-dev-serverを使う事がほとんど。
watchオプションでできる常駐監視、オートビルドはwebpack-dev-serverを使うことで更に高機能になります。
そのため一応こういう使い方もあるよ!という事だけ覚えておいて、ぜひwebpack-dev-serverを使って下さい!

build

buildを実行すると以下のような出力が表示されます。

$ npm run build  
> [email protected] build C:\Users\ユーザー名\Desktop\webpackProject  
> webpack --mode production  

Hash: 5e0109a7b0b93b273800  
Version: webpack 4.43.0  
Time: 266ms  
Built at: 2020-06-27 23:43:09  
    Asset       Size  Chunks             Chunk Names  
bundle.js  966 bytes       0  [emitted]  main  
Entrypoint main = bundle.js  
[0] ./src/index.js + 1 modules 178 bytes {0} [built]  
    | ./src/index.js 89 bytes [built]  
    | ./src/js/taxCalc.js 89 bytes [built]  

今度は3行目が-- mode productionになっていますね!
ソースを見てみましょう。

!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";r.r(t);alert(1.1*400)}]);  

不要なコメント記述は全て削除され、見事1行にminify化されました。
変数も適宜展開されていたり難読化されています。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@braveryk7の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう