首页 文章

Webpack Dev Server Hot Reload不使用SCSS和多个条目

提问于
浏览 次
0

Problem

我正在尝试使用html-webpack插件创建一个包含多个条目，SCSS和自动生成的HTML页面的应用程序 . Everyting在dist目录中编译正常，但是当我使用dev服务器时，热重载不起作用 . 我可以看到每当我进行更改时，代码编译就好了 . 我认为问题是由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"
  }
webpack webpack-dev-server webpack-style-loader webpack-4 html-webpack-plugin

1 回答

  • 0

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

    回复于

相关问题