webpack-serve試してみたメモ
webpack-serve
webpackの開発用web serverとして webpack-dev-server
が多く利用されていると思う(webpackの公式にも記載されてるし)のですが、webpack-dev-server
は、現在メンテナンスモードのみとなって機能追加等は今後行われない模様です。
代替として webpack-serve
を利用するのが良いと記載されてます。ただし、古いブラウザでテストする場合には webpack-dev-server
利用する。
- webpack-serve
webpack-serve をインストールする
- yarnの場合
yarn add webpack-serve -D
- npmの場合
npm install webpack-serve -D
webpack-serve をauto-reloadの設定をする
- webpack-config.js
const path = require('path'); const chokidar = require('chokidar'); const stringify = require('json-stringify-safe'); const WebSocket = require('ws'); module.exports = { entry: './src/index.js', output: { filename: 'app.js', path: path.resolve(__dirname, 'dist') }, mode: 'development' }; module.exports.serve = { content: [path.resolve(__dirname, 'dist')], config: { }, hot: { host: 'localhost', port: 8081, }, open: true, on: { 'listening': () => { console.log('listening'); const socket = new WebSocket('ws://localhost:8081'); const watchPath = __dirname; const options = {}; const watcher = chokidar.watch(watchPath, options); watcher.on('change', () => { const data = { type: 'broadcast', data: { type: 'window-reload', data: {}, }, }; socket.send(stringify(data)); }); } }, };
これまでよりも記述量が増えてしまったけど、取り敢えずHTMLやJavaScriptのファイルを変更すると、browserの再読込されるところまでは動作の確認が出来た。 ただ、もっと簡潔な設定方法が出来るといいんだけど。