Webpack Dev Server Hot Reload not working with SCSS and Multiple Entries

Question

Problem

I'm trying to create an application with multiple entries, SCSS and automaticly generated HTML pages using the html-webpack plugin. Everyting compiles fine in the dist directory, however when i use the dev server hot reloading is not working. I can see that whenever I make a change the code compiles just fine. I think the problem is caused by the html loader. Is there a fix or work-around to make this work?

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

tstreets · Accepted Answer · 2018-09-06 05:19:43Z

0

Im super new to configuring webpack so im not sure if this is correct or will help but here is my start script in my package.json and my hot reload works fine:

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

so from my understanding using "--hot" is what tells webpack to enable the hot reloading.

i used this resource to help me configure webpack. Its pretty basic but it might help. https://medium.freecodecamp.org/how-to-conquer-webpack-4-and-build-a-sweet-react-app-236d721e6745

answered Sep 6, 2018 at 5:19

tstreets

351 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Webpack Dev Server Hot Reload not working with SCSS and Multiple Entries

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related