Javascript Webpack-部署后的浏览器缓存清理请求

Javascript Webpack-部署后的浏览器缓存清理请求,javascript,reactjs,caching,webpack,deployment,Javascript,Reactjs,Caching,Webpack,Deployment,我使用react和asp.net开发了一个web应用程序。为了部署前端,我使用webpack(下面是我的webpack.config.js)创建包(bundle.js、node_modules.js、ext_modules.js…),然后将其粘贴到服务器中 通常,此过程运行良好,但在上次部署后,我们的客户必须清除浏览器缓存,才能使用最新版本的应用程序 我怎样才能克服这个问题?我需要更改网页包配置吗 const path = require('path'); const webpack = req

我使用react和asp.net开发了一个web应用程序。为了部署前端,我使用webpack(下面是我的
webpack.config.js
)创建包(bundle.js、node_modules.js、ext_modules.js…),然后将其粘贴到服务器中

通常,此过程运行良好,但在上次部署后,我们的客户必须清除浏览器缓存,才能使用最新版本的应用程序

我怎样才能克服这个问题?我需要更改网页包配置吗

const path = require('path');
const webpack = require('webpack');
const config = require('../common/config.js');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')

const webpackConfig = env => {
    return {
        node: {
            fs: 'empty'
        },
        optimization: {
            minimizer: [
                new TerserPlugin({
                    parallel: true,
                    sourceMap: env === "development"
                }),
                new OptimizeCssAssetsPlugin({})
            ],
            splitChunks: {
                cacheGroups: {
                    node_modules: {
                        test: /[\\/]node_modules[\\/].*\.js$/,
                        name: 'node_modules',
                        chunks: 'all'
                    },
                    ext_modules: {
                        name: 'ext_modules',
                        test: /[\\/]ext_modules[\\/]azure_storage[\\/]/,
                        minSize: 0,
                        chunks: 'all'
                    }
                }
            }
        },
        mode: env === "development" ? "development" : "production",
        entry: { bundle: "./src/Index.tsx" },
        output: {
            filename: "[name].js",
            path: path.join(__dirname, "dist/")
        },
        devtool: env === "development" ? "cheap-eval-source-map" : false,
        resolve: {
            extensions: ['.ts', '.tsx', '.js', '.jsx'],
            modules: [
                path.resolve('./node_modules/'),
                path.resolve('./src')
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({ template: "index-template.html" }),
            new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /it/),
            new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en/),
            new MiniCssExtractPlugin({ filename: "[name].css" }),
            new OptimizeCssAssetsPlugin({
                assetNameRegExp: /\.optimize\.css$/g,
                cssProcessor: require('cssnano'),
                cssProcessorPluginOptions: {
                    preset: ['default', { discardComments: { removeAll: true } }],
                },
                canPrint: true
            })
        ],
        module: {
            rules: [
                {
                    test: /\.(jsx|tsx|js|ts)$/,
                    loader: "ts-loader",
                    options: {
                        transpileOnly: true,
                        compilerOptions: {
                            target: env === "development" ? "ES6" : "es5"
                        }
                    },
                    exclude: /node_modules/,
                },
                {
                    test: /\.css$/,
                    use: [env === "development" ? 'style-loader' : MiniCssExtractPlugin.loader, 'css-loader']
                },
                {
                    test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                    loader: 'url-loader?limit=100000'
                }
            ]
        },
        devServer: {
            host: "localhost",
            contentBase: path.join(__dirname, "dist/")
        },
        externals: { 'Config': config.getConfig(env) }
    }
};

module.exports = env => webpackConfig(env);