Ownedmedia ウェブ制作に役立つコンテンツを発信中!

webpack 2021.06.03

webpackでBrowserSyncを使った自動リロード機能を作成してみる

Tags: ,,,

ローカル環境でのフロントエンド開発やマークアップには欠かせない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の編集、画像ファイルの差し替えでも自動で更新されるのでとても便利ですね。

この記事を書いた人

オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?