vue 使用webpack打包图片，GZIP打包js和css压缩

vue 使用webpack打包图片，GZIP打包js和css压缩

1.打包压缩图片
① 输入命令安装file-loader

npm i -D file-loader

② 在webpack.config.js中的rules数组中添加file-loader的相关配置

  require("image-webpack-loader")

{
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        use:[
          {
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: utils.assetsPath('img/[name].[hash:7].[ext]')
            }
          },
          {
            loader: 'image-webpack-loader',
            options: {
              bypassOnDebug: true,
            }
          }
        ]
      }

2.压缩js和css
输入命令行

npm install compression-webpack-plugin --save-dev

找到config下面的index.js文件，productionGzip改为true，开启Gzip压缩

productionGzip: true,
productionGzipExtensions: ['js', 'css'],

找到webpack.prod.conf.js文件

if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

在webpack.base.conf.js文件中

const CompressionPlugin = require("compression-webpack-plugin");



 plugins: [
    new CompressionPlugin({
      asset: '[path].gz[query]', //目标资源名称。[file] 会被替换成原资源。[path] 会被替换成原资源路径，[query] 替换成原查询字符串
      algorithm: 'gzip',//算法
      test: new RegExp(
           '\\.(js|css)$'    //压缩 js 与 css
      ),
      threshold: 10240,//只处理比这个值大的资源。按字节计算
      minRatio: 0.8//只有压缩率比这个值小的资源才会被处理
    })
  ]