webpack-dev-server not reloading-CodePudding

The

The full webpack config looks like:

const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { mode: "development", devtool: "eval-cheap-module-source-map", entry: { index: "./src/index/index.ts", error: "./src/error/error.ts", }, resolve: { extensions: [ ".js", ".jsx", ".ts", ".tsx", ".less", ".css", ".json", ".mjs", ], }, module: { rules: [ { test: /\.ts$/i, exclude: /node_modules/, use: [ { loader: "ts-loader", }, ], }, { test: /\.html$/i, exclude: /node_modules/, use: "html-loader", }, { test: /\.css$/i, exclude: /node_modules/, use: ["style-loader", "css-loader"], }, { test: /\.png$/i, exclude: /node_modules/, type: "asset/resource", generator: { filename: "img/[name].[contenthash][ext]", }, }, { test: /\.(woff|woff2|ttf)$/i, exclude: /node_modules/, type: "asset/resource", generator: { filename: "fonts/[name].[contenthash][ext]", }, }, { test: /\.mp3$/i, exclude: /node_modules/, type: "asset/resource", generator: { filename: "[name].[contenthash][ext]", }, }, ], }, plugins: [ new HtmlWebpackPlugin({ template: "./src/index/index.ejs", inject: "body", chunks: ["index"], filename: "index.html", meta: { "robots": { name: "robots", content: "noindex, nofollow" }, }, }), new HtmlWebpackPlugin({ template: "./src/error/error.html", inject: "body", chunks: ["error"], filename: "error.html" }) ], optimization: { runtimeChunk: "single", }, };

For proper Hot Module Reload -- stands for just update pieces of your changed code without reloading the whole browser --

A few more adjustments are required, there are a lot of resources in the internet about this that I will try to list at the end, but since you are not using babel -- that works differently -- you need to provide a few more configurations in your webpack and also remove other properties.

Update ts-loader configuration

First check the ts-loader docs about HMR

Useful links:

Issue in ts-config: https://github.com/TypeStrong/ts-loader/issues/352

Issue with module var: Webpack TypeScript module.hot does not exist

I hope that this helps you!

CodePudding user response：

The issue was related with WSL. More specifically running webpack in WSL on Windows file system (e.g. at /mnt/c/Users/MyUser/Documents/MyProject).

After moving the project to WSL file system (e.g. at /home/MyUser/MyProject) I was able to get live reload to work.

Even though this question mentions Parcel and Webpack, it is similar. I found the answer provides good context around the issue: https://stackoverflow.com/a/72786450/3685587