Webpack HMR不重新加载html。
Webpack HMR不重新加载html。
提问于 2017-01-19 03:45:52
我现在有了最简单的项目结构：
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中使用app.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-模板。
档案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是一样的。怎么能修好呢？
回答 2
Stack Overflow用户
发布于 2017-02-13 23:03:26
你在用IDE吗？对于Intelij:设置▶︎系统设置▶︎同步▶︎禁用安全写入。也许这对你有帮助。谢谢
Stack Overflow用户
发布于 2017-04-29 21:56:55
我不知道你的设置有什么问题，但它一般都会起作用。这里是一个极简的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'
})
],
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41733375
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号