时间戳

首页 > 解决方案 > Webpack 开发服务器热重载不适用于 SCSS 和多个条目

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

问题描述

问题

我正在尝试使用 html-webpack 插件创建具有多个条目、SCSS 和自动生成的 HTML 页面的应用程序。Everyting 在 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"
  }

标签： webpackwebpack-dev-serverwebpack-style-loaderwebpack-4html-webpack-plugin

解决方案

我对配置 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

推荐阅读