webpack-cache-version

简介：

一款基于webpack自动添加资源版本号的loader，用于清除资源的缓存。

使用方法：

• package.json中配置mediaDir参数：

  {
    "name": "01",
    "version": "1.0.0",
    "description": "",
    "mediaDir": "https://static.web.sdo.com/woool/website/"
  }

• 生成环境下打包时配置loader

  module.exports = {
      mode: 'production',
      module: {
          rules: [
              {
                  test: /\.(jpe?g|png|gif)/,
                  exclude: /node_modules/,
                  type: 'asset/resource'
              },
              {
                  test: /\.scss$/,
                  use: [
                      MiniCssExtractPlugin.loader,
                      'css-loader',
                      'sass-loader',
                      'webpack-cache-version'
                  ]
              },
              {
                  test:/\.vue$/,
                  use:['vue-loader','webpack-cache-version']
              }
          ]
      }
  }

• 打包效果：

  自动将相对路径下的资源替换成线上的绝对路径，并自动添加版本号清除CDN缓存。

  // scss文件
  header{
      width: 100%;
      height: 0.76rem;
      background: url('./assets/banner.jpg') no-repeat center center;
  }

  打包后：

  header{
      width:100%;
      height:.76rem;
      background:url("https://static.web.sdo.com/woool/website/banner.jpg?v=2023-08-02-14-08-58") no-repeat center center
  }

• vue和react下使用：

  vue和react在使用该插件时，只需在相应的vue-loader和jsx-loader之前调用该插件即可

  module.exports = {
      mode: 'production',
      module: {
          rules: [
              {
                  test:/\.vue$/,
                  use:['vue-loader','webpack-cache-version']
              }
          ]
      }
  }