前端项目打包部署后如何避免让用户强制去清除浏览器缓存

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">

<link rel="stylesheet" href="main.css?v=1.0" rel="external nofollow" >
<script src="main.js?v=1.0"></script>

// mini-css-extract-plugin 是一个 Webpack 插件，用于将 CSS 从 JavaScript bundle 中分离出来，生成独立的 CSS 文件。
// 这样做有利于提高网页加载速度，因为 CSS 可以被浏览器并行下载，而且还能利用浏览器对静态资源的缓存机制。
// 此外，它也支持 CSS Modules 和热模块替换（HMR）。
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ...
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js', // 使用chunkhash为chunk生成哈希文件名
    chunkFilename: '[name].[chunkhash].chunk.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // 将MiniCssExtractPlugin.loader放在第一位，以将CSS提取到单独的文件中
          MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
      // 如果你也在处理其他样式文件，如less或sass，也应相应配置
    ],
  },
  plugins: [
    // 在plugins部分配置MiniCssExtractPlugin
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
      chunkFilename: '[id].[contenthash].chunk.css',
    }),
  ],
  // ...
};

const path = require('path')
const webpack = require('webpack')

module.exports = {
  publicPath: './',
  // 打包的时候使用hash值
  filenameHashing: true,
 
  // 输出文件目录
  outputDir: 'dist',
  
  configureWebpack: {
    // 打包编译后的js文件
    output: {
      filename: `js/[name].[chunkhash].js`,
      chunkFilename: `js/[name].[chunkhash].chunk.js`,
    }
  },
 
  // 打包后css文件
  css: {
    extract: { 
      filename: `css/[name].[contenthash].css`,
      chunkFilename: `css/[id].[contenthash].chunk.css`,
    }
  }
}