Vue项目打包开发测试环境时给css和js增加hash 解决缓存问题

前景提要：数周前 测试环境发现一个因为缓存导致的bug 组长为了解决这个问题 将测试环境的环境变量NODE_ENV修改为production了 因为mode=production时 会自动给文件都加上hash

but 前两天我在开发时发现项目编译十分缓慢 我开发时图方便 所以本地一直跑的测试环境 一开始还以为是网速 结果昨天重启项目时才发现每次修改一点东西 都会重新全量编译 麻了....

昨天排查了俩小时 最终锁定是由于环境变量和启动服务时的mode不一致 导致了热更新失效了 排查的过程真是一把辛酸泪 网上别人失效的原因都没在我这里出现 甚至为此我还使用插件测试了一下打包的文件大小和速度 殊不知是热更新gg了

回到正题

那既然热更新失效了 当然是要解决这个问题的 而且不能每次都把环境变量注释修改了吧 又麻烦又容易忘

并且组长一致强调hash也要 所以就兼顾一下好了

说来更苦逼了 上网一顿搜索 给打包文件加hash挺简单的 但是我这个项目的webpack配置文件就很尴尬 什么modules啊什么plugin啊 都是通过chainWebpack来复写的

所以网上cv过来的那当然是gg 只有js文件加了hash css压根没有单独打包

为了让它单独打包 我又引入了mini-css-extract-plugin这个插件 并且要和css-loader搭配使用 如果使用了sass或者less 也是需要加入loader的

贴下源码

使用contenthash是为了可以给每个文件增加独立的hash 听说是目前最优解

const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const miniCss = new MiniCssExtractPlugin({
  filename: 'css/[name].[contenthash].css'
})

// 这里本身打算也写在chainWebpack中的 结果怎么都不生效 就还是按照这种常规写法了
const moduleConfig = {
  rules: [
    {
      test: /\.scss$/,
      use: [
        MiniCssExtractPlugin.loader,
        "css-loader", "sass-loader"
      ]
    },
  ]
}

const config = {
  outputDir: 'dist',
  lintOnSave: false,
  configureWebpack: c => {
    return {
      module: moduleConfig,
      plugins: [miniCss],
    };
  },
  chainWebpack: config => {
    // 给js加hash
    config.output.filename(`js/[name].[contenthash].js`).end();
    config.output.chunkFilename('js/[name].[contenthash].js').end()
  },
};

module.exports = config;