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

我终于偶然发现了 html-webpack-plugin ，如in this guide所述。

我跑：

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;

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

＆＃34;模板＆＃34; app 中的 index.html 文件：

<!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>

现在，当webpack-dev-server运行index.html时，对index.html的更改也会立即在浏览器中刷新。话虽这么说，index.html如此之小，编辑它的用例以及希望编辑自动刷新浏览器似乎微不足道。尽管如此，app位于build目录而不是if dice1roll == 1 or dice2roll == 1 and player1roll != 'End Turn':目录中感觉更好。

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

1 个答案: