前端项目部署更新后，不清缓存也能得到最新静态资源文件

首先我们得知道，SPA应用打包后的js、css等信息全都在index.html文件中导入，我们每次打包的时候，这些静态资源文件会携带一个hash值，如果hash值不变的话，又存在缓存的话就会走强缓存或者协商缓存，导致静态资源不是最新的。那么如何能达到项目上线后不清缓存页面也能获取到最新静态资源呢？
那么解决方案也有很多种，我这边采用的比较简单粗暴，每次打包都给文件后面加一个时间戳，那么每次刷新页面的时候index.html里导入的静态资源就会找不到缓存，这时候就会从服务器请求最新资源。

如何配置打包文件带时间戳呢？使用chainWebpack或者configureWebpack。

chainWebpack是vuecli提供的操作webpack的语法糖，作用和configureWebpack一样，都是修改webpack配置，

1. 首先配置js打包名称，

planA: 使用chainWebpack，chainWebpack是一个对象。

chainWebpack: (config) => {
        config.output.filename(`js/js[name].${timeStamp}.js`).chunkFilename(`js/chunk.[id].${timeStamp}.js`);
        }

planB: 使用configureWebpack，configureWebpack是一个对象或者函数，如果你需要基于环境有条件地配置行为，或者想要直接修改配置，那就换成一个函数。

configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
            config.output.filename = `js/js[name].${timeStamp}.js`;
            config.output.chunkFilename = `js/chunk.[id].${timeStamp}.js`;
        }
    },

或者使用对象

 configureWebpack: {
        output: { // 输出重构 打包编译后的js文件名称,添加时间戳.
            filename: `js/js[name].${timeStamp}.js`,
            chunkFilename: `js/chunk.[id].${timeStamp}.js`,
        }
    },

2.配置css资源

   ...configureWebpack,
    css: { 
        extract: { // 打包后css文件名称添加时间戳
            filename: `css/[name].${timeStamp}.css`,
            chunkFilename: `css/chunk.[id].${timeStamp}.css`,
        }
    },

打包完的文件包含一个app，此时我们导出vuecli webpack配置vue inspect > output.js，可以看到有个app