webpack-serveで開発サーバを建てる
2018-08-13
かつて 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 で起動します．