启用 HMR 时如何使自动重新加载工作答案

【问题标题】：how to make auto reload work when HMR enabled启用 HMR 时如何使自动重新加载工作
【发布时间】：2017-10-22 03:19:13
【问题描述】：

我已经多次尝试配置 webpack。每次我启动该过程时，自动重新加载一直正常工作，直到我为 web-dev-server 启用 --hot，然后对 html 的任何更改都没有影响，没有错误，什么都没有，只是一个登录终端更改，并登录浏览器控制台，无需更新。热重载适用于 CSS 和 JS，我知道 HTML 不支持 HMR，但至少预计自动刷新可以继续工作......

我的配置如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
const webpack = require('webpack');

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'app.js',
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Hello world',
            template: 'src/views/index.html',
            alwaysWriteToDisk: true
        }),
        new HtmlWebpackHarddiskPlugin(),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    devtool: 'inline-source-map',
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        hot: true,
        inline: true,
        open: true,
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                'css-loader',
            ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader',
                ]
            }
        ]
    }
};

我在 package.json 中的脚本

"scripts": {
    "dev": "webpack-dev-server --config webpack.config.js",
    "prod": "cross-env NODE_ENV=production webpack -p --config         webpack.config.js"
},

【问题讨论】：

没有测试过这个但是试试reload-html-webpack-plugin
谢谢，我已经尝试了上述许多其他解决方案，但每次自动重新加载再次开始工作时，我都会在 CSS 上丢失 HMR（假设也是 JS，尚未测试）。我想在 html 上自动重新加载，在 CSS 和 JS 上自动重新加载。

标签： html webpack webpack-hmr

【解决方案1】：

我不确定这是否是实现它的“正确”方式。但这对我有用，有以下修改。

devServer: {
    **contentBase: resolve('src/views'),**
    open: true,
    hot: true,
    stats: "errors-only",
    overlay: true,
    **watchContentBase: true**
},

这对我来说似乎没有意义，但是，如果您将 watchContentBase 设置为 true 并将 contentBase 指向“dist”，您将丢失 HMR 并且任何更改（事件到 css/js 文件）将导致完全重新加载，即不是我的目标。

我的src结构如下：

/ src
- images
- js
- sass
- views

我还查看了似乎遇到同样问题的 vue-cli。对 index.html 的任何更改都不会反映（不会触发整个页面重新加载）。

【讨论】：