webpack HMR не загружает изменения

Я разрабатываю простой статический HTML-сайт. Прямо сейчас есть только один html-файл, index.html. Использование веб-пакета 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, причем каждый из них объединяется. Вот общее:

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
    }
});

person John Dibling    schedule 28.01.2018    source источник


Ответы (1)


Я решил эту проблему, добавив ваш текущий HTML-путь, а не dist build.

devServer: {
    contentBase: './path/html/files'
    watchContentBase: true,
},
person lexcode    schedule 25.04.2018