Webpack 开发服务器热重载不适用于 SCSS 和多个条目

Question

>问题

我正在尝试使用 html-webpack 插件创建一个具有多个条目、SCSS 和自动生成的 HTML 页面的应用程序。在dist目录中，每个编译都很好，但是当我使用开发服务器时，热重载不起作用。我可以看到，每当我进行更改时，代码都可以很好地编译。我认为问题是由 html 加载器引起的。是否有修复或解决方法可以使其正常工作？

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: {
test1: "./src/pages/test1.js",
test2: "./src/pages/test2.js"
},
module: {
rules: [
{ test: /.js$/, exclude: /node_modules/,
use: { loader: "babel-loader" } },
{ test: /.htm$/,
use: [{loader: "html-loader", options: { minimize: true }}]},
{ test: /.s?css$/,
use: ["style-loader", "css-loader", "sass-loader"]}]
},
plugins: [
new HtmlWebpackPlugin({filename: "test1.htm",template: 
"./src/template.htm", inject: 'true', chunks: ['test1']}),
new HtmlWebpackPlugin({filename: "test2.htm",template: 
"./src/template.htm", inject: 'true', chunks: ['test2']}),
new MiniCssExtractPlugin({filename: "[name].css", chunkFilename: " 
[id].css"})
]
}

包.json

"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
}

Answer 1

我是配置 webpack 的超级新手，所以我不确定这是否正确或会有所帮助，但这是我的 package.json 中的启动脚本，我的热重载工作正常：

"scripts": {
"start:dev": "webpack-dev-server --mode development --config config/webpack.base.config.js --open --hot --history-api-fallback",

因此，根据我的理解，使用"--hot"告诉 Webpack 启用热重载。

我使用此资源来帮助我配置 Webpack。它非常基本，但可能会有所帮助。https://medium.freecodecamp.org/how-to-conquer-webpack-4-and-build-a-sweet-react-app-236d721e6745