webpack HMR 未加载更改

Question

我正在开发一个简单的静态 HTML 网站。现在，只有一个 html 文件 index.html。使用 Webpack 3.10.0。我已经配置了 HMR。

当我对我的一个样式表进行更改时，它会按预期重新编译和重新加载：

[WDS] App updated. Recompiling...
client?5cf9:222 [WDS] App hot update...
log.js:23 [HMR] Checking for updates on the server...
log.js:23 [HMR] Updated modules:
log.js:15 [HMR]  - ./src/styles/app.scss
log.js:23 [HMR] App is up to date.

但是当我对 index.html 进行更改时，chrome 控制台说它正在重新编译，但在重新编译结束时它说“没有热更新”：

[WDS] App updated. Recompiling...
client?5cf9:222 [WDS] App hot update...
log.js:23 [HMR] Checking for updates on the server...
log.js:23 [HMR] Nothing hot updated.
log.js:23 [HMR] App is up to date.

我正在使用单独的 dev 和 prod webpack 配置文件，每个文件都合并了一个公共文件。这是常见的：

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const FaviconsWebpackPlugin = require('favicons-webpack-plugin');

module.exports = {
    entry: {
        app: './src/js/index.js'
    },
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist',
        hot: true
    },
    output: {
        filename: '[name].bundle.[hash].js',
        // path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
              test: /\.(png|svg|jpg|gif)$/,
              use: [
                  {
                      loader: 'file-loader',
                      options: {
                          name: '[name].[ext]'
                          // outputPath: 'img/',
                          // publicPath: 'img/'
                      }
                  }
                  ]
            },
            {
                test: /\.html$/,
                use: ['html-loader']
            },
            {
                test: /\.(s*)css$/,
                use: ['style-loader', 'css-loader', {
                    loader: 'postcss-loader',
                    options: {
                        plugins: function() {
                            return [
                                require('precss'),
                                require('autoprefixer')
                            ]
                        }
                    }
                }, 'sass-loader']
            }
        ]
    },
    plugins: [
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            hash: true,
            title: 'Thinkpiece Partners',
            template: 'src/html/index.html',
            inject: 'body'
        }),
        new FaviconsWebpackPlugin({
            // Your source logo
            logo: './src/img/icon/icon-1024.png',
            // The prefix for all image files (might be a folder or a name)
            prefix: 'icons-[hash]/',
            // Emit all stats of the generated icons
            emitStats: true,
            // The name of the json containing all favicon information
            statsFilename: 'iconstats-[hash].json',
            // Generate a cache file with control hashes and
            // don't rebuild the favicons until those hashes change
            persistentCache: true,
            // Inject the html into the html-webpack-plugin
            inject: true,
            // favicon background color (see https://github.com/haydenbleasel/favicons#usage)
            background: '#fff',
            // favicon app title (see https://github.com/haydenbleasel/favicons#usage)
            title: 'Thinkpiece Partners',

            // which icons should be generated (see https://github.com/haydenbleasel/favicons#usage)
            icons: {
                android: true,
                appleIcon: true,
                appleStartup: true,
                coast: false,
                favicons: true,
                firefox: true,
                opengraph: false,
                twitter: false,
                yandex: false,
                windows: false
            }
        })
    ]
}

和开发...

const path = require('path');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    devtool: 'inline-source-map',
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        port: 8000
    }
});

Answer 1

我通过添加您当前的 HTML 路径而不是 dist 构建解决了这个问题。

devServer: {
    contentBase: './path/html/files'
    watchContentBase: true,
},