webpack-serve で開発サーバを建てる

かつて webpack-dev-server が使われていましたが、webpack-serve に移行したらしいので、新しいほうを使ってみようと思います。

ちなみに、古いブラウザを利用する場合は前のパッケージを使う必要があるようです。

インストール

$ yarn add webpack-serve -D

# npm の場合
$ npm install webpack-serve -D

-D は --dev オプションです。

webpack-serve のバージョンは 2.0.2 です。

設定ファイル

webpack.config.js

module.exports = {
  mode; process.env.WEBPACK_SERVE ? 'development' : 'production',
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  }
}

serve.config.js

とりあえず、ビルドするときには webpack.config.js を読み込み、開発サーバでテストするときは serve.config.js を使うようにしておきます。

バージョン 2 では argv が必要になったので、古い記事を参考にすると動かなかったりします。

const serve = require('webpack-serve');
const config = require('./webpack.config.js');
const argv = {}
const options = { config, open: true, host:'127.0.0.1', port:8080 }

serve(argv, options);

サーバの起動

$ npx webpack-serve

http://localhost:8080 で起動します。

(参考)

webpackとwebpack-serveで静的なWeb環境を作る | Qiita