我使用react和asp.net开发了一个Web应用程序。为了部署前端,我使用webpack(下面是我的webpack.config.js
)创建程序包(bundle.js,node_modules.js,ext_modules.js ...),然后将其粘贴到服务器内部。
通常,此过程运行良好,但是在最后一次部署后,我们的客户必须清除其浏览器缓存才能使用该应用程序的最新版本。
我该如何克服这个问题?我需要更改webpack的配置吗?
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);