WebpackDevServerを使わずに、Webpackで監視しているファイルが変更された時にブラウザを自動リロードする方法

9251 ワード
React JavaScript webpack webpack-livereload-plugin webpack-dev-server JavaScript テキストリンク

最近私はPHPでサーバー側を作成し、htmlで、webpackでバンドルしたjsを読み込む、という感じのことをやっていたのですが、WebpackDevServerで起動した時のように、
jsファイルを保存 -> ブラウザ自動リロード ができないかと思い、ググってみるとwebpackのプラグインがあったので紹介ですm(_ _)m

webpack-livereload-plugin を使うとうまくできました

Install

npm i -D webpack-livereload-plugin
# または
yarn add -D webpack-livereload-plugin

webpack.config.js

設定に追加

webpack.config.js
const LiveReloadPlugin = require("webpack-livereload-plugin");

module.exports = {

    // ...

    plugins: [
        new LiveReloadPlugin()
    ],
};

htmlで以下のように読み込みます

<script src="http://localhost:35729/livereload.js"></script>

webpackでビルド、-w または --watchオプションをつけてビルドする

yarn webpack -w

これでWebpackで監視しているファイルが変更された時に自動でブラウザがリロードされます

Reactで試してみる

Reactで試してみた時の自分の設定です

githubにも同じのを置いてあります https://github.com/okumurakengo/webpack-livereload

yarn add react react-dom
yarn add -D webpack webpack-cli webpack-livereload-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react
webpack.config.js
const LiveReloadPlugin = require("webpack-livereload-plugin");

module.exports = {
    mode: process.env.NODE_ENV || "development",
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"]
                    }
                }
            }
        ]
    },
    resolve: {
        extensions: [".jsx", ".js"]
    },
    plugins: [
        new LiveReloadPlugin()
    ],
};
src/index.js
import React from "react";
import { render } from "react-dom";
import App from "./App";

render(<App />, document.getElementById("root"));
src/App.jsx
import React from "react";

const App = () => (
    <>Hello</>
);

export default App;
index.html
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Document</title>
<script src="dist/main.js" defer></script>
<script src="http://localhost:35729/livereload.js"></script>
<div id="root"></div>

yarn webpack -w #./dist/main.js が出力

この状態で file:///<ディレクトリへのpath>/index.html などでindex.htmlをブラウザで表示する

私の場合はPHPの簡易サーバーを起動してindex.htmlを表示して試してみました php -S 0.0.0.0:8080

ファイルを保存するたびにブラウザが自動でリロードできました。
最後まで読んでいただいてありがとうございました。m(_ _)m