webpack-dev-serverで開発用サーバを立てる

webpackでは、開発用サーバを簡単に立てることが出来る。

前回の記事でwebpack2の導入に成功したので、今度はそこにwebpack-dev-serverを導入してみる。

前回の記事の最後で、Reactをビルドできる状態になった。
その時はhtmlファイルを直接開いていたが、ローカルサーバを立ち上げてそこでhtmlを表示できるようにするのが、今回の目的。

なお、この記事で使用しているバージョンは、webpack@2.4.1webpack-dev-server@2.4.5である。

サーバを起動するまでの手順

まずは必要なnpmパッケージをインストール

$ npm i -D webpack-dev-server

次に、webpack.config.jsを編集して、以下の内容にする。

const path = require('path');

const config = {
  context: path.resolve(__dirname, 'src'),
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js',
  },
  module: {
    rules: [{
      test: /\.js$/,
      include: path.resolve(__dirname, 'src'),
      use: [{
        loader: 'babel-loader',
        options: {
          presets: [
            ['es2015', 'react'],
          ],
        },
      }],
    }],
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'public'),
    port: 3000,
  },
};

module.exports = config;

devServerの設定を追加している。
contentBaseで指定したディレクトリが、サーバの起点になる。省略した場合は、カレントディレクトリが起点になる。
portはその名の通り、ポート番号を指定する。省略した場合は8080となる。

最後に、package.jsonscriptsを編集。

"scripts": {
  "start": "webpack-dev-server --inline",
  "build": "webpack -p"
},

この状態で$ npm startを実行すると、ローカルサーバが立ち上がる。
http://localhost:3000/にアクセスすると、Hello, React!と表示されているのが確認できる。

そして、src/parts.jsの内容を編集して保存すると、自動的にビルドが行われ、さらにブラウザのリロードも自動的に行われるのが分かる。

ディレクトリの場所に注意

contentBaseで指定するディレクトリと、バンドルファイルをoutputするディレクトリは、同一のものにする必要がある。
上記の例では両方共publicになっているので、問題ない。

例えばこれを変更してみる。

serverというディレクトリを作り、そこにindex.htmlというファイルを置く。

<!DOCTYPE html>
<html>
<head>
  <title>webpack</title>
</head>
<body>
  <div id="app"></div>
  <script src="../public/bundle.js"></script>
</body>
</html>

このファイルを直接開くと、問題なくbundle.jsを読み込め、正しく表示される。

では、ローカルサーバでアクセスするとどうなるのか。
contentBase: path.resolve(__dirname, 'server'),とした上で、$ npm startしてみる。 すると、bundle.jsを読み込めず、上手くいかない。

ビルドしたファイルは出力されない

webpack-dev-serverを実行していると自動的にビルドされることは既に述べた。
だが、ビルドしたファイルはメモリ上に保存されるらしく、実際にbundle.jsとして出力されるわけではない。

試しに、サーバを起動させた状態でsrc/parts.jsHello, React!となっている部分をHello, Server!に書き換えてみる。
自動的にビルドされ、Hello, Server!と描画される。

では、直接htmlファイルを開くとどうなるか。
Hello, React!のままである。つまり、bundle.jsの内容は、変更前のままである。

つまり、webpack-dev-serverを実行しても、bundle.jsには出力されないというである。
実際にファイルに出力するには、webpackを実行する必要がある。

参考資料