index.html 更改时浏览器自动重新加载

Question

我在非常简单的设置中使用 webpack-dev-server。我发现即使服务器在 index.js 文件更改时自动触发浏览器重新加载，它也会 而不是 在 index.html 更改时触发重新加载。我怎样才能做到这一点？

这是我的设置：

package.json

{
  "name": "html-reload",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
        "build": "node_modules/webpack/bin/webpack.js",
        "start": "webpack-dev-server --host 0.0.0.0 --port 8383 --content-base dist"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  }
}

webpack.config.js

module.exports = {
    entry: './src/index.js',
    output: {
        path: 'dist',
        filename: 'bundle.js'
    }
};

我启动 webpack-dev-server 使用：npm run start 并将浏览器指向：

http://localhost:8383/webpack-dev-server/index.html

我在 src/index.js 中所做的每项更改都会在浏览器中自动刷新，但我在 dist/index.html 中所做的更改不会如此。

Answer 1

我终于按照 in this guide.

的描述偶然发现了 html-webpack-plugin

我运行:

npm i -D html-webpack-plugin

并将我的 webpack.config.js 编辑为如下所示：

'use strict';
const path = require('path');

const APPDIR = 'app/';

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
    template: path.resolve(__dirname, APPDIR, 'index.html'),
    filename: 'index.html',
    inject: 'body'
});

const config = {
    context: path.resolve(__dirname, APPDIR),
    entry: './main.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                include: path.resolve(__dirname, 'app/')
            },{
                test: /\.css$/,
                loaders: ['style', 'css']
            }
        ]
    },
    plugins: [HTMLWebpackPluginConfig]
};

module.exports = config;

"template" index.html 文件现在位于我的 app 目录中，并且在构建项目时生成的 index.html 文件位于 build 目录中.后一个文件包含对捆绑输出文件的正确引用 bundle.js（这是两个文件之间的唯一区别）。

"Template" index.html 文件在 app:

<!doctype html>
<html>
  <head>
    <script src="http://localhost:8090/webpack-dev-server.js"></script>
  </head>
  <body>
    <div id='app'></div>
  </body>
</html>

在 build:

中生成的输出 index.html 文件

<!doctype html>
<html>
  <head>
    <script src="http://localhost:8090/webpack-dev-server.js"></script>
  </head>
  <body>
    <div id='app'></div>
  <script type="text/javascript" src="bundle.js"></script></body>
</html>

现在，当运行ning webpack-dev-server 更改为 index.html 时，也会立即在浏览器中刷新。话虽这么说，index.html 是如此之小，编辑它并希望编辑自动刷新浏览器的用例似乎微不足道。不过，与 build 目录相比，index.html 位于我的 app 目录中感觉更好。

index.html 更改时浏览器自动重新加载

browser automatic reload when index.html changes

webpack-dev-server