现在我拥有最简单的项目结构:
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是一样的。如何解决这个问题?