When I change the TS file, Webpack doesn't stop refreshing the page. Console says: @ebpack 5.66.0 compiled successfully

I've googled this and tried different plugins, but they didn't work. The mild refresh plugin just stopping the refresh and excluding JS files from ts-loader doesn't work at all. The related issue in git didn't give the result as well.

webpack.config.json:

const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const HTMLInlineCSSWebpackPlugin = require("html-inline-css-webpack-plugin").default;
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');

const htmlWebpackPlugin = new HtmlWebPackPlugin({
    template: "./src/index.html",
    filename: "./index.html",
    inlineSource: '.(js|css)$',
    inject: 'body',
});

module.exports = {
    entry: ['./src/index.tsx', './src/main.css'],
    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
        fallback: {
            "path": require.resolve("path-browserify"),
            "os": require.resolve("os-browserify/browser"),
            "url": require.resolve("url"),
            "tty": require.resolve("tty-browserify"),
            "minimatch": require.resolve("minimatch"),
            "process": require.resolve("process")
        },
    },
    module: {
        rules: [{
                test: /\.tsx?$/,
                exclude: [/node_modules/, /\.js$/, /\.d\.ts$/, /dist/],
                loader: 'ts-loader',
                options: {
                    configFile: 'tsconfig.json',
                }
            },
            {
                test: /\.css$/,
                use: [
                  MiniCssExtractPlugin.loader,
                  "css-loader"
                ]
            }
        ],
    },
    output: {
        filename: 'bundle.js',
        publicPath: '',
    },
    plugins: [
        new webpack.ProvidePlugin({
            process: 'process',
          }),
        new MiniCssExtractPlugin({
            filename: "main.css",
            chunkFilename: "mainc.css"
        }),
        htmlWebpackPlugin,
        new HTMLInlineCSSWebpackPlugin(),
        new InlineChunkHtmlPlugin(HtmlWebPackPlugin, [/bundle/]),
    ]
};

package.json:

{
    "name": "browser",
    "version": "0.0.0",
    "scripts": {
        "build": "webpack --mode development",
        "start": "webpack serve --mode development --port 3000"
    },
    "devDependencies": {
        "@types/chrome": "^0.0.163",
        "@types/jquery": "^3.5.10",
        "@types/node": "^16.11.7",
        "@types/react": "^17.0.34",
        "@types/react-dom": "^17.0.11",
        "@types/vscode": "^1.62.0",
        "@types/vscode-webview": "^1.57.0",
        "css-loader": "^6.5.1",
        "html-inline-css-webpack-plugin": "^1.11.1",
        "html-webpack-plugin": "^5.5.0",
        "mini-css-extract-plugin": "^2.4.6",
        "react-dev-utils": "^12.0.0",
        "ts-loader": "^9.2.6",
        "typescript": "^4.5.4",
        "webpack": "^5.66.0",
        "webpack-cli": "^4.9.1",
        "webpack-dev-server": "^4.7.3"
    },
    "dependencies": {
        "ace-builds": "^1.4.13",
        "axios": "^0.24.0",
        "bootstrap": "^5.1.3",
        "jquery": "^3.6.0",
        "minimatch": "^5.0.1",
        "mobx": "^6.3.6",
        "mobx-react": "^7.2.1",
        "os-browserify": "^0.3.0",
        "path-browserify": "^1.0.1",
        "process": "^0.11.10",
        "react": "^17.0.2",
        "react-ace": "^9.5.0",
        "react-bootstrap": "^2.0.2",
        "react-dom": "^17.0.2",
        "redoc": "^2.0.0-rc.66",
        "styled-components": "^5.3.5",
        "tty-browserify": "0.0.1",
        "url": "^0.11.0",
        "uuid": "^8.3.2"
    }
}

CodePudding user response：

You better change InlineChunkHtmlPlugin tests from /bundle/ to /runtime/.

Replace

new InlineChunkHtmlPlugin(HtmlWebPackPlugin, [/bundle/])

With

new InlineChunkHtmlPlugin(HtmlWebPackPlugin, [/runtime~. [.]tsx/])

OR

new InlineChunkHtmlPlugin(HtmlWebPackPlugin, [/runtime/])