css - webpack HMR 没有加载 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 选项，命令行版本自动添加了一个插件。