webpack压缩图片

通常用webpack打包时,会根据webpack.config.jsurl-loader中设置的limit大小来对图片进行处理,小于limit的图片转化成base64格式,其余的不做操作。对于比较大的图片我们可以用image-webpack-loader 来压缩图片。
安装:

npm install image-webpack-loader --save-dev

webpack.config.js 中配置

{
  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,
      }
    }
  ]
}

你可能感兴趣的:(Vue)