Webpack4 + TypeScript + Sass + EJSの開発環境をカスタマイズ

前回の記事では、Webpack4の開発環境の基礎となる部分を構築したので、今回はより実戦的なカスタマイズを行っていきます。

webpack-dev-serverでブラウザ同期

バンドルと同時にブラウザでプレビューできるよう、Webpackにサーバー機能を導入します。BrowserSyncと同じです。

$ npm install --save-dev webpack-dev-server

パッケージのインストールが終わったら、webpack.config.jsに設定を追加します。

  ...
  devServer: {
    contentBase: path.resolve(__dirname, 'docs'),
    compress: true,
    host: '0.0.0.0',
    open: true
  },
  ...

open: trueを設定することで、自動的にブラウザで開くようになります。特定のブラウザ名を指定することも可能です。

また、LAN内の別端末からもアクセスできるように、host: '0.0.0.0'を指定しています。この指定がないとlocalhostだけになってしまうのか、LAN内の端末からIPアドレスでアクセスすることができません。

nodemonでファイル変更を監視

WebpackのCLIにも--watchというオプションがあり、変更を監視することができるようになっていますが、除外フォルダを指定するなどの高度な設定をしたいので、今回はnodemonを導入します。

$ npm install --save-dev nodemon

npm-run-allで複数のnpm scriptを同時に実行

元々の機能でも&&を使ってコマンドを連結することが可能ですが、より手軽に複数のnpm scriptを実行できるよう、npm-run-allを導入します。

$ npm install --save-dev npm-run-all

npm-run-allでは、パッケージ名そのままのnpm-run-allコマンドに加え、スクリプトを直列に実行するrun-sコマンドと、並列に実行するrun-pコマンドが使えるようになります。実行順序の保証が必要な場合はrun-sを、そうでない場合はrun-pを使います。

今回はWebpackの実行とnodemonによるファイル変更の監視の2つですが、これは並行して実行されても問題ない処理なので、run-pコマンドを使うことにします。

npm scriptの編集

ここまで導入したパッケージをnpm scriptで使えるようにするため、package.jsonを編集します。

  ...
  "scripts": {
    "prod": "run-p watch:prod server:prod",
    "dev": "run-p watch:dev server:dev",
    "webpack:prod": "webpack --mode production",
    "webpack:dev": "webpack --mode development",
    "watch:prod": "nodemon --ignore docs/ --ignore node_modules/ -e js,ts,mjs,css,scss,ejs,html -x \"npm run webpack:prod\"",
    "watch:dev": "nodemon --ignore docs/ --ignore node_modules/ -e js,ts,mjs,css,scss,ejs,html -x \"npm run webpack:dev\"",
    "server:prod": "webpack-dev-server --mode production",
    "server:dev": "webpack-dev-server --mode development"
  },
  ...

nodemonでは除外フォルダの設定と、変更を監視するファイルの拡張子を設定しています。スクリプトが増えてごちゃごちゃしてきましたが、基本的にはnpm run devnpm run prodのどちらかを実行すれば事足ります。