Webpack HMR 不重新加载 HTML。

Question

一个用于测试问题的简单仓库

现在我拥有最简单的项目结构：

  root
    |-src
    --|index.pug
    --|--styles.css
    --|--app.js
    |-public
    --|--img

软件包：

"devDependencies": {
    "css-loader": "^0.26.1",
    "html-loader": "^0.4.4",
    "html-webpack-plugin": "^2.26.0",
    "pug": "^2.0.0-beta6",
    "pug-loader": "^2.3.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  }

在 app.js 中，我只需引用样式，并将其作为 webpack.config.js 的入口使用，如下所示：

const HtmlWebpackPlugin = require('html-webpack-plugin');

let src = {
    app: path.resolve(__dirname,'src', 'app.js'),
    public: path.resolve(__dirname, 'public'),
    html: {template: path.resolve(__dirname, 'src', 'index.pug')}
}

module.exports = {
    resolve: ['', '.js', '.css', '.pug'], // tried with or without it. Change nothing
    entry: src.app,
    output: {
        path: src.public,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.pug$/,
                loader: 'pug-loader',
                query: {
                    pretty: true
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'index.html',
            template: src.html.template
        })
    ],
    devServer: {
        contentBase: src.public
    },
    devtool: 'sourcemap'
}

运行webpack-dev-server: webpack-dev-server --hot --inline

之后我得到了很好的热替换CSS效果，但是对于HTML就没有。当我更改我的index.pug模板文件时，我会得到一些控制台消息取决于app.js中是否需要pug-template。

app.js文件（webpack入口点）

    // without requiring template got: 
    //[WDS] App updated. Recompiling... [WDS] App hot update...
    // and nothing happens
/*
When template required I got these messages:

[HMR] Cannot apply update. Need to do a full reload!
(anonymous) @ dev-server.js:18
hotApply @ bootstrap f3d9aa9…:390
hotUpdateDownloaded @ bootstrap f3d9aa9…:303
hotAddUpdateChunk @ bootstrap f3d9aa9…:283
webpackHotUpdateCallback @ bootstrap f3d9aa9…:4
(anonymous) @ 0.f3d9aa9….hot-update.js:1
dev-server.js:19[HMR] Error: Aborted because 83 is not accepted
    at hotApply (http://localhost:8080/bundle.js:391:31)
    at hotUpdateDownloaded (http://localhost:8080/bundle.js:304:13)
    at hotAddUpdateChunk (http://localhost:8080/bundle.js:284:13)
    at webpackHotUpdateCallback (http://localhost:8080/bundle.js:5:12)
    at http://localhost:8080/0.f3d9aa9823a803392473.hot-update.js:1:1
And page reloads by refreshing. 
*/
    require('./index.pug'); 

    require('./styles.css');

使用纯HTML而不是Pug是一样的。如何解决这个问题？

- Maksim Nesterenko

Answer 1

你是否在使用IDE？对于Intelij用户：设置 ▶︎ 系统设置 ▶︎ 同步 ▶︎ 禁用安全写入。也许这对你有帮助。谢谢。

- Влад Кискин

---

不，安全写入并不是原因。 - Maksim Nesterenko

Answer 2

我不确定您的设置出了什么问题，但通常应该可以正常工作。 这是一个简单的webpack配置，其中html和css注入与HMR一起运行。希望对您有所帮助：

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'
    },
    module: {
        rules: [{
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    },
    devtool: false,
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html'
        })
    ],
};

- HendrikEng