vue-cli 3 使用 webpack 输出 js css 文件 hash 解决缓存问题

该解决方案针对 Vue 等 hash 打包静态资源，且 nginx 部署的项目。

这样的项目一般来讲打包后生成的 hash 已经帮我们解决了 js/css 的问题。

但 html 资源始终是 那个 index.html，我们浏览器刷新再刷新始终是 304 状态码。

怎么办！摔 ！ (′д｀ )…彡…彡

那我们就只需要解决掉 index.html 这个辣鸡文件的缓存问题就好啦！

nginx 配置如下：

location / {
     gzip_static on;
     root /usr/share/nginx/html;
     index index.html index.htm;
     try_files $uri $uri/ /index.html;
     if ($request_filename ~* .*\.(?:htm|html)$)
     {
         add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
     }
     if ($request_filename ~* .*\.(?:js|css)$)
     {
         expires      7d;
     }
     if ($request_filename ~* .*\.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm)$)
     {
         expires      7d;
     }
 }

上面几个 if 是核心配置了，表明 html/htm 文件不再使用缓存，js/css 等文件的缓存有 7 天有效期。

刚刚看别的博文有这样配置的：

location ~ .*\.(html)$ {
	expires -1;
	if_modified_since off;
	add_header Last-Modified "";
	add_header Cache-Control no-cache;
	etag off;
}

试了下结果 index.html 确实没有缓存了，但是因为 js/css 的文件名都没变化，导致浏览器仍然会读取 js/css 的缓存，因此我们需要给打包输出的文件名给予 hash 处理，使其每次打包输出的文件名都不同，这样浏览器就不会读取旧有的缓存文件了。

vue-cli 3 在 vue.config.js 加入如下配置：

{
	configureWebpack: config => {
		// 输出文件名 hash，杜绝版本更新后浏览器不刷新
		config.output.filename = `[name].${VERSION}.${Timestamp}.js`
		config.output.chunkFilename = `[name].${VERSION}.${Timestamp}.js`
		......
	}
}

css 一般会和 js 打包到一起，如果希望单独打包并进行 hash 可以使用 ExtractTextPlugin 精选提取，配置如下：
依赖安装：

npm install –save-dev extract-text-webpack-plugin@next

const ExtractTextPlugin = require('extract-text-webpack-plugin')
configureWebpack: config => {
  config.module.rules.push({
    test: /\.less$/i,
    use: ExtractTextPlugin.extract(['css-loader', 'less-loader'])
  })
  config.plugins.push(
    new ExtractTextPlugin({
      filename: `css/[name].${VERSION}.${Timestamp}.css`,
      allChunks: true
    })
  )
}

需要注意的是… 如果 rules 不配置，那可能提取了个寂寞，但是如果是 vue cli 的话，自己如上定义可能会出问题，我还没有真正实践成功。

报错的话大概率是没有安装 @next 版本的，因为 extract-text-webpack-plugin 还不能支持webpack4.0.0以上的版本。