webpackでBrowserSyncを使った自動リロード機能を作成してみる
最終更新日: Update!!
ローカル環境でのフロントエンド開発やマークアップには欠かせない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」のパッケージもインストールしていきます。
今回はwebpackでBrowserSyncを使ったブラウザの自動リロード機能を使える環境を作成してみました。Gulpを使っていた時もそうですが、このようなタスクは作業効率の面からやはり自動化しておきたいですね。JavaScriptのコーディングだけでなく、HTMLやCSSの編集、画像ファイルの差し替えでも自動で更新されるのでとても便利ですね。
$ 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の編集、画像ファイルの差し替えでも自動で更新されるのでとても便利ですね。
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories