After upgrading webpack3 to 4, every time I retype the module in the development environment, how to solve the problem of slow hot loading?

webpack.common.js

let lessPackage = {};

if ( NODE_ENV === "develop") {
    lessPackage = {
        test: /\.less/,
        use:[
            "style-loader",
            "css-loader",
            "less-loader"
        ]
    };
} else if ( NODE_ENV === "production" ) {

    lessPackage = {
        test: /\.less$/i,
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: ["css-loader", "less-loader"],
            publicPath: "../"
        }),

    };
}

let baseConfig = {

    entry: addEntry(),
    resolve: {
        // 
        alias: {
            "PATH_SRC": path.resolve(__dirname, "src"),
            "PATH_SRC_UTILS": path.resolve(__dirname, "src/utils"),
            "PATH_SRC_PAGES": path.resolve(__dirname, "src/pages")
        },
        // webpack
        modules: [path.resolve(__dirname, "src"), "node_modules"],
        extensions: [".js", ".jsx"]
    },
    module: {
        rules: [
            lessPackage,
            {
                test: /\.scss$/,
                use:[
                    "style-loader",
                    "css-loader",
                    "sass-loader"
                ]
            },
            {
                test: /\.css$/,
                exclude: [
                    path.resolve(__dirname, "node_modules")
                ],
                use: [
                    "style-loader",
                    "css-loader"
                ]
            },
            // {
            //     //.js;
            //     test: /\.js$/,
            //     //
            //     exclude: /(node_modules|bower_components)/,
            //     //babel-loaderes6
            //     loaders: [
            //         "babel-loader", // .babelrc 
            //         //"eslint-loader"//  .babelrc 
            //     ]
            // },
            {
                test: /\.(jsx|js)$/,
                exclude: /(node_modules|bower_components)/,
                loaders: [
                    require.resolve("babel-loader"), // .babelrc 
                    //"eslint-loader"//  .babelrc 
                ]

                // query: {
                //     presets: ["react", "stage-0", "es2015"]
                // }

            },
            {
                test: /\.json$/,
                use: "json-loader"
            },
            {
                test:/\.(png|svg|jpg|gif|ico|woff|eot|ttf)$/,
                exclude: /(public)/,
                use: [
                    {
                        loader: "url-loader",
                        options: {

                            limit:8000000,   //50K 

                            name:"[hash:8].[name].[ext]",
                            // publicPath:"img/",  //CSS 
                            // outputPath:"../img/"        //
                        }
                    }
                ]
            }

        ]
    },
    performance: {
        hints: "warning", // 
        maxAssetSize: 30000000, // 
        maxEntrypointSize: 50000000, // 
        assetFilter: function(assetFilename) {
            // 
            return assetFilename.endsWith(".css") || assetFilename.endsWith(".js");

        }
    },
    plugins: [
        // new CleanWebpackPlugin(["dist"], { //  dist 
        //     exclude: [venderName + ".js"] //    js
        // }),

        new webpack.DefinePlugin({ // 
            PRODUCTION: JSON.stringify(true),
            "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || "development")
        }),
        new HelloWorldPlugin({options: true})
    ]
};

webpack.dev.js

module.exports = merge(common.baseConfig, {
    output: { //
        //filename: "[name].bundle.js", //
        // filename: "[name].[chunkhash].js",
        // __dirname
        path: __dirname + "service/dist", //
        publicPath:"dist/", // publicPath
        filename: "[name].bundle.js",
        library: manifest.name
    },
    devtool: "source-map",
    devServer: {
        contentBase: [path.join(__dirname, "./service")], //   
        host: "127.0.0.1",
        compress: true,
        port: 6600,
        open: false, // 
        //
        //proxy: proxyArray
        proxy: {
            "/api":{
                //target:"http://demo.kube.univer/",
                target:proxy_target,  //URLURL
                // secure:true,
                changeOrigin: true, // headerURL
                ws: false //  websockets
                /*
                ///help
                pathRewrite: {
                    "^/help": ""
                }
                */
            }
        }
    },
    optimization: {
        minimize: false
    },
    plugins:[
        new webpack.HotModuleReplacementPlugin(), // 
        new BundleAnalyzerPlugin({
            analyzerMode: "server", // static/disabled
            analyzerHost: "127.0.0.1",
            analyzerPort: 9900,
            openAnalyzer: false
        }),
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require("./service/dist/vendor-manifest.json")
        }),
    ]
});

Jun.09,2021
Menu