vue webpack图片压缩 image-webpack-loader(记录过程,有对比结果)

结果：

优化前：

优化后： 

webpack配置： 在 webpack.base文件夹中，webpack写loader的地方默认就写这里，找找就找到

    {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        exclude: [path.resolve(process.cwd(), 'src/assets/css')],
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: utils.assetsPath('img/[name].[hash:7].[ext]')
            }
          },
          {
            loader: 'image-webpack-loader'
          }]
      },

两次打包的区别只有把use数组的后面一项删除 ，其他都是默认脚手架的配置..

      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        exclude: [path.resolve(process.cwd(), 'src/assets/css')],
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: utils.assetsPath('img/[name].[hash:7].[ext]')
            }
          }]
      },

安装依赖命令：cnpm install--save-dev image-webpack-loader    (用npm会下载失败)