Webpack does not live reload with new compiled SCSS code. It live reloads when I change the HTML. It also live reloads when I change the JS file.
The recent change I did was to add a second HtmlWebpackPlugin, so I can work on the next HTML page. Here is a step by step explanation of where the problem happens:
| What I did | Webpack Dev Server |
|---|---|
edit script.js |
live realod updates site |
edit archive-book.html |
live reload updates site |
edit stylesheet for archive-book.html |
live reload does NOT update site |
edit post.html |
live reload updates site |
edit stylesheet for post.html |
live reload updates site |
| hard refresh browser | does not update site with new stylesheet |
For the styling to actually apply to the page, I need to close the server and restart it again.
It's like it is caching the stylesheet it first loaded with, and then even if the code compiles anew, it just loads the last cached stylesheet.
webpack.common.js
const path = require("path");
module.exports = {
entry: "./dev/script.js",
module: {
rules: [
{
test: /\.html$/i,
use: ["html-loader"],
},
{
test: /\.(svg|png|jpg)$/i,
use: {
loader: "file-loader",
options: {
esModule: false,
name: "[name].[hash].[ext]",
outputPath: "assets/images",
},
},
},
],
},
devtool: "source-map",
};
webpack.dev.js
const path = require("path");
const common = require("./webpack.common.js");
const { merge } = require("webpack-merge");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = merge(common, {
mode: "development",
plugins: [
new HtmlWebpackPlugin({
template: "./dev/post.html",
filename: "post.html",
}),
new HtmlWebpackPlugin({
template: "./dev/archive-book.html",
filename: "archive-book.html",
}),
],
module: {
rules: [
{
test: /\.scss$/i,
use: ["style-loader", "css-loader", "sass-loader"],
},
],
},
devServer: {
contentBase: path.join(__dirname, "dist"),
watchContentBase: true,
inline: true,
hot: true,
compress: true,
port: 8080,
},
output: {
filename: "script.dev.js",
path: path.resolve(__dirname, "dist"),
publicPath: "./",
},
});
When I am editing my SCSS file and save, webpack does compile, but does not reload.
And the console.
Here are my dependencies I have
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.1",
"file-loader": "^6.2.0",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^4.5.0",
"mini-css-extract-plugin": "^1.3.3",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"sass": "^1.32.5",
"sass-loader": "^10.1.0",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.0.3",
"webpack": "^5.11.1",
"webpack-cli": "^4.3.0",
"webpack-dev-server": "^3.11.1",
"webpack-merge": "^5.7.3"
}
And this is how I start my dev server:
"start": "webpack serve --config webpack.dev.js --open"
And those are the following StackOverflow Questions I checked out, which did not help me:
- Webpack dev server reloads but doesn't show Markup or CSS changes?
- webpack-dev-server not reloading on html or sass change
- webpack live hot reload for sass
- Multiple html files using webpack
- How can I use multiple entries in Webpack alongside multiple HTML files in HtmlWebpackPlugin?
- webpack-dev-server not updating bundle when saving file
- Why doesn't LiveReload work in Webpack when changing HTML if Hot Module Replacement is enabled?
- webpack-dev-server how to reload css without page refresh
- webpack-dev-server not reloading on html or sass change
- webpack live hot reload for sass
