webpack-serve試してみたメモ

webpack-serve

webpackの開発用web serverとして webpack-dev-server が多く利用されていると思う(webpackの公式にも記載されてるし)のですが、webpack-dev-server は、現在メンテナンスモードのみとなって機能追加等は今後行われない模様です。 代替として webpack-serve を利用するのが良いと記載されてます。ただし、古いブラウザでテストする場合には webpack-dev-server 利用する。

github.com

  • webpack-serve

github.com

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の再読込されるところまでは動作の確認が出来た。 ただ、もっと簡潔な設定方法が出来るといいんだけど。