как заставить работать автоматическую перезагрузку при включенном HMR

Я несколько раз пытался настроить webpack. Каждый раз, когда я запускаю процесс, автоматическая перезагрузка работает нормально, пока я не включу --hot для web-dev-сервера, тогда любые изменения в 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"
},

webpack html webpack-hmr
person joeyj    schedule 22.10.2017    source источник
comment
Не тестировал это, но попробуйте reload-html-webpack-plugin   -  person andykenward    schedule 22.10.2017
comment
Спасибо, я пробовал вышеописанное, как и многие другие решения, но каждый раз, когда автоматическая перезагрузка снова начинает работать, я теряю HMR на CSS (при условии, что также JS, еще не тестировал). Я хотел бы иметь автоматическую перезагрузку для html и HMR для CSS и JS.   -  person joeyj    schedule 22.10.2017

Ответы (1)


arrow_upward
0
arrow_downward

Я не уверен, что это "правильный" способ добиться этого. Но это работает для меня со следующими поправками.

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 не отражаются (не вызывает полную перезагрузку страницы).

person joeyj    schedule 12.11.2017