ローカル環境でのフロントエンド開発やマークアップには欠かせないBrowserSyncですが、過去記事「Gulp ＋ Browsersyncを使ったブラウザ自動リロードでコーディング効率化を目指す」ではGulp環境で使う方法をまとめていましたが、webpackの環境での使えるようにしていきたいですよね。今回はwebpackでBrowserSyncを使える環境を構築していきます。   webpackではローカルサーバーとして「webpack-dev-server」というものもあり、こちらを使うことでも自動更新はできます。（参考記事：webpack-dev-serverでローカルサーバーと自動更新させてwebpackのファイル変更を検知する）ただし、バージョンによって設定が変わったりなど少し扱いづらい印象があります。ですので、やはりBrowserSyncを使う方がやりやすいのではないでしょうか。   BrowserSyncを使った自動リロード機能にはTypeScriptやJavaScriptをバンドルする作業が必要になります。過去記事ではwebpackでTypeScriptのコンパイルやBabelを使ったJavaScriptのトランスパイルに関する記事をまとめており、今回はそれを準備している前提で進めていますので、下記のリンクからご参考ください。 【参考記事】 webpackでTypeScriptの自動コンパイル環境を作成してみる webpackでBabelを使ったJavaScriptトランスパイルの環境構築   それではまず必要なパッケージをインストールしていきます。下記のようにコマンドを実行していきます。BrowserSync本体と、webpackでBrowserSyncを使う場合には必要となる「browser-sync-webpack-plugin」のパッケージもインストールしていきます。

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

  インストールが完了するとpackage.jsonにパッケージが追加されているのが確認できます。これで準備は完了ですので、引き続きwebpackの設定を行なっていきます。 【package.json】

{
  .......
  "devDependencies": {
    .......
    "browser-sync": "^2.26.14",
    "browser-sync-webpack-plugin": "^2.3.0",
    .......
  },
  .......
}

  今回のディレクトリ構造は下記にようなものを想定しています。これまで同様に編集用のソースファイルはsrcディレクトリに格納し、コンパイルされたファイルや公開用のファイルはdistディレクトリにまとめます。BrowserSyncはこのdistディレクトリ配下のファイル更新を検知し、ブラウザをリロードしていくという機能にしていきます。

node_modules
dist
┣（main.js）
┗ index.html
src
┗ main.ts
webpack.config.js
tsconfig.json

  それではwebpackの設定を行なっていきます。まずは必要なパッケージをそれぞれ読み込んでおきます。ローダーの設定は不要ですが、pluginsの設定を下記のように追加していきます。引数にはオプションが入り、サーバーやポート番号、監視対象となるルートディレクトリを設定していきます。 【webpack.config.js】

const path = require('path');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader'
      },
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [ '@babel/preset-env' ]
            }
          }
        ]
      },
    ]
  },
  resolve: {
    extensions: [ '.ts', '.js', '.json' ]
  },
  plugins: [
    new BrowserSyncPlugin({
      host: 'localhost',
      port: 2000,
      server: { baseDir: directoryPath.dist }
    })
  ]
}

  そのほかにもリロードを制御したり、プロキシサーバーの設定などもできるようです。詳しくはnpmのドキュメントをご参考ください 【browser-sync-webpack-plugin - npm】 https://www.npmjs.com/package/browser-sync-webpack-plugin   そして、webpackのコマンドでウォッチオプションをつけて実行しファイルを監視するようにしていきます。するとローカルサーバーが起動しブラウザ上でページが自動で表示されます。

$ webpack -w

  これで実際にソースをコンパイルしたり、distディレクトリにあるHTMLファイルなどを直接編集したりすることで、BrowserSyncが機能しブラウザが自動でリロードしてくれるようになります。コンソールにも下記のように更新履歴が確認できますね。

[Browsersync] Access URLs:
-------------------------------------
Local: http://localhost:2000
External: http://192.168.11.6:2000
-------------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
-------------------------------------
[Browsersync] Serving files from: /Users/USERNAME/PROJECTDIR/dist

[Browsersync] Reloading Browsers...

 

---

  今回はwebpackでBrowserSyncを使ったブラウザの自動リロード機能を使える環境を作成してみました。Gulpを使っていた時もそうですが、このようなタスクは作業効率の面からやはり自動化しておきたいですね。JavaScriptのコーディングだけでなく、HTMLやCSSの編集、画像ファイルの差し替えでも自動で更新されるのでとても便利ですね。