webpack HMR not loading css

Question

一个简单的webpack配置，但不起作用：

var path = require("path");
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
module: {
rules: [
{
test:/.css$/,
use:['style-loader','css-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
hash: true,
filename: 'index.html',
title: 'My Awesome application',
myPageHeader: 'Hello World',
template: './src/index.html',
})
],
devServer: {
port: 8000,
hot: true
},
};

当我用"hot:false"运行时，它可以工作，我的CSS被加载，但用"hot:true"我可以看到我的html，但样式没有加载。。。

"webpack": "^4.16.0",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"

如果我使用webpack构建，然后在浏览器中打开dist/index.html，它也可以工作。

在index.js中，我导入了这样的css：

import './styles/app.css';

~

Answer 1

我删除了hot: true，并在脚本中添加了--hot选项，命令行版本自动添加了一个插件。