webpack-dev-serverを使ってみる
webpack-dev-server
開発用サーバを立てることができるモジュールです。
詳しくは公式のドキュメントを見てみてください。
手順
モジュールをインストール。
npm install --save-dev webpack-dev-server
package.jsonにscriptを追加。
"scripts": { "start": "webpack-dev-server" }
サーバーを起動する。
npm start
http://localhost:8080
でアクセスできるようになる。
サーバーの設定をする
サーバーの設定は、package.jsonにも指定できるが、webpack.config.jsに記載すると見やすい気がする。
サーバーに設定できるオプションで、私がよく使うのは下記。
オプション | 説明 |
---|---|
contentBase | サーバの起点ディレクトリを指定。未指定の場合はカレントディレクトリが起点になる。 |
port | 未指定の場合は8080が初期値になる。 |
open | サーバー起動時にブラウザを開く。true or falseで指定。 |
inline | ライブリロードを行うための設定。true or falseで指定。未指定の場合はtrue |
hot | Hot Module Replacement(HMR)を有効にします。true or falseで指定。未指定の場合はtrue。 |
※hotについては、webpack.config.jsに指定するとエラーとなるのでpackage.jsonにwebpack-dev-server --hotとして渡す必要があるようです。
webpack.config.jsに指定する場合
devServer: { contentBase: path.resolve(__dirname, 'dist'), port: 3000, open:true },
package.json指定する場合
"scripts": { "start": "webpack-dev-server client.js --inline --hot --colors --content-base dist/ --port=3000" }
live reloadを利用する
ライブリロードを行う場合は、webpack.config.jsのoutput
のpath
の設定と、devServer
のcontentBase
の設定を同じにする必要があるようです。
ただし、同じにした場合に少し問題があります。 出力先のフォルダにindex.htmlを入れることになるので、ファイル構成上変な感じがします(私だけかもしれませんが。。。)
そこで、output
のpublicPath
を設定することで、path
とcontentBase
が異なってもライブリロードを行うことができます。 publicPathはwebpack-dev-serverを利用する際は、指定したほうが良さそうです。
const path = require('path'); module.exports = { //ビルドするファイル entry: path.resolve(__dirname, './src/main.js'), //ビルドしたファイルの出力先 output: { path: path.resolve(__dirname, './dist'), filename: 'bundle.js', publicPath: '/assets' }, //開発サーバーの設定 devServer: { contentBase: path.resolve(__dirname, './src'), inline: true, open: true }, devtool: 'source-map' };
webpack-dev-serverでのビルド
webpack-dev-serverでも、webpack.config.js設定にあわせてファイルのビルドが行われます。 ただしこのビルドは、実際のnpm run build
とは異なり、ファイルはメモリ上に保存されます。
例)webpack.config.jsの設定が上記の場合はこんな感じ
. ├── node_modules ├── package-lock.json ├── package.json ├── src │ ├── index.html │ ├── main.js │ └── assets //メモリ上に存在する │ └── dist.js //メモリ上に存在する └── webpack.config.js
その他
webpack-dev-serverはipはそのままの設定ではプライベートIPでアクセスすることができません。
プライベートIPでアクセスする為、host:0.0.0.0とdisableHostCheck: trueを追加します。
devServer: { contentBase: path.resolve(__dirname, 'dist'), port: 3000, open:true, host 0.0.0.0, disableHostCheck: true },
まとめ
メモリ上にファイルが保存されるのがよくわからず、ハマりました。