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

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

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

インストール

terminal
$ yarn add webpack-serve -D

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

-D--dev オプションです.

(追記 2019/3/1) --dev は廃止されて --only=dev になりました.

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

設定ファイル

webpack.config.js

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 が必要になったので,古い記事を参考にすると動かなかったりします.

serve.config.js
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);

サーバの起動

terminal
$ npx webpack-serve

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

参考

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