webpack(4)でBrowserSyncをもっと簡単に使う

概要

• browser-sync-webpack-pluginを使う(更新がちょっと古い気がする)
• dev-serverはPHPビルトインサーバーを使う(webpack-dev-serverの設定も面倒で)

コマンド＆コード

$ npm install --save-dev browser-sync-webpack-plugin browser-sync

package.json

~~省略

  "scripts": {
    "watch": "php -S 0.0.0.0:8000 & webpack --watch --config webpack.config.js",

~~省略

webpack.config.js

~~省略
  plugins: [
    new BrowserSyncPlugin({
      host: "localhost",
      port: 3000,
      proxy: "http://localhost:8000"
    })
  ]
~~省略

あとは

$ npm run watch

を叩けばBrowserSyncで自動ブラウザリロード環境ができる。

参考

browser-sync-webpack-plugin