Question

我一直在多次尝试配置webpack。每次我启动这个过程，自动重装一直都很好，直到我启用--hot为web-dev-server，然后对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"
},

Answer 1

我不确定这是否是＆＃34;对＆＃34;实现它的方法。但这对我来说有以下几点修正。

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

这对我来说似乎没有意义但是，如果你将watchContentBase设置为true并将contentBase指向＆＃34; dist＆＃34;，则会丢失HMR并且任何更改（css / js文件的事件）都将导致完全重装，这不是我的目标。

我的src结构如下：

/ src
- images
- js
- sass
- views

我还看了一下似乎遭受同样问题的vue-cli。对index.html的任何更改都不会反映出来（不会触发整页重新加载）。

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

1 个答案: