Webpack, почему не работает LiveReload при изменении HTML, если включен Hot Module Replacement?

Question

[Сергей Коноваленко]

Если в Webpack в настройках devServer задать hot: true, то Hot Module Replacement для CSS работает и изменения применяются без полной перезагрузки страницы. Но при изменении HTML файлов почему-то не работает LiveReload, нужно страницу обновлять вручную, чтобы изменения применились.

Если же в файле конфигурации в devServer отключить hot: true, то при изменении HTML файлов LiveReload работает нормально, страница перезагружается сама, но не работает Hot Module Replacement для CSS, при изменении CSS страница перезагружается полностью.

Такое поведение и должно быть? Почему так происходит, как можно включить Hot Module Replacement для CSS, но при этом чтобы работал и LiveReload при изменении HTML файлов?

Для создания множества HTML файлов использую плагин HtmlWebpackPlugin.

Вот ниже файлы конфигурации:

webpack.common.js

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');

module.exports = mode => {
const PRODUCTION = mode === 'production';

return {
    entry: {
        app: './src/index.js',
    },
    output: {
        filename: 'js/[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
    },
    module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'img/[path][name].[ext]',
                            outputPath: 'img',
                        },
                    },
                ],
            },
        ],
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            hash: false,
            template: 'src/index.html',
            filename: 'index.html',
        }),
        new webpack.DefinePlugin({
            PRODUCTION: PRODUCTION,
        }),
        new CopyPlugin([
            { from: 'src/img', to: 'img' },
            { from: 'src/fonts', to: 'fonts' },
        ]),
    ],
}
};

webpack.dev.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');

module.exports = (env, argv) => {

return merge(common(argv.mode), {
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist',
        overlay: {
            warnings: true,
            errors: true
        },
        port: 8081,
        hot: true,
    },
    watchOptions: {
        aggregateTimeout: 100,
    },
    module: {
        rules: [
            {
                test: /\.s[ac]ss$/i,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                ],
            },
            {
                test: /\.css$/i,
                use: [
                    'style-loader',
                    'css-loader',
                ],
            }
        ],
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
    ],
});
};

Comments

[Сергей Коноваленко]

Sergey Kondrashevsky, Привет. К сожалению, до сих пор еще так и не получилось решить.

[Сергей Коноваленко]

Sergey Kondrashevsky, Горячая замена модулей — HOT, нужна в проекте.

[Сергей Коноваленко]

Sergey Kondrashevsky, Да, если HOT отключить, то HTML обновляется, это я знаю. Но тут вопрос в том, как сделать, чтобы был включен HOT и при этом HTML обновлялся.

Answer 1

[vadoscf]

Попробуйте подключить html-loader и подключить index.html к index.js файлу (import './index.html')

Comments

[DenisLopatin]

Работает, спасибо

[UchihaBoy]

спасибо тебе)