的WebPack HMR不会重新加载HTML

Question

Minimalistic repository for problem testing

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

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我只是需要样式并将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的服务器：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而不是哈巴狗是相同的。它如何被修复？

Answer 1

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

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' 
     }) 
    ], 
};