のぐそんブログ

暗いおじさんがシコシコ書くブログです。

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のoutputpathの設定と、devServercontentBaseの設定を同じにする必要があるようです。

ただし、同じにした場合に少し問題があります。 出力先のフォルダにindex.htmlを入れることになるので、ファイル構成上変な感じがします(私だけかもしれませんが。。。)

そこで、outputpublicPathを設定することで、pathcontentBaseが異なってもライブリロードを行うことができます。 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

まとめ

メモリ上にファイルが保存されるのがよくわからず、ハマりました。