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"})
  ]
}

package.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

Webpack Dev Server热重装不适用于SCSS和多个条目

1 个答案: