webpack图片压缩image-webpack-loader无法安装或安装卡死的解决办法

webpack 中使用图片压缩能极大的减少包的大小,对于前端来说也是一个重要的优化点。当前有很多方法都可以实现,不过既然使用 webpack 那我们就应该再懒一点,一次配置以后就不管了,多好,哈哈哈

这里就推荐使用 image-webpack-loader,还有像 img-loader 和 imagemin-webpack-plugin 等其实底层调用的借口都是类似的。image-webpack-loader 使用也很简单只需要配置一个 loader 即可

{
    test: /\.(png|gif|jpe?g|svg)$/i,
    exclude:[path.resolve(process.cwd(), 'src/assets/css')],
    use: [
        {
            loader: 'url-loader',
            options: {
                limit: 1024,
                name: '[hash:8].[ext]',
                useRelativePath: false,
                outputPath: function(fileName){
                    return 'assets/images/'+fileName
                }
            }
        },
        {
            loader:'image-webpack-loader'
        }
    ]
}

不过呢,再安装的时候确出了毛病。本来在上班的电脑是好的,结果回家后死活都装不了,在install的时候直接卡死,半天不动。唉心累,找了各种办法本来打算放弃,无意间看到有人说可以使用 cnpm 试试,于是就抱着试试的心态,一试果然成功了,哈哈哈,美滋滋!

具体操作

1、若安装过 image-webpack-loader 先卸载

yarn remove image-webpack-loader   // npm uninstall image-webpack-loader

2、使用 cnpm , 这一步意思就是安装 cnpm 然后将全局的 registry 设置成阿里的镜像,国内阿里比较快

npm install cnpm -g --registry=https://registry.npm.taobao.org

3、使用 cnpm 安装  image-webpack-loader 会发现很快就安装好了,【手动滑稽】

cnpm install --save-dev  image-webpack-loader 

注:如果先前尝试使用 yarn 或 npm 安装过,一定要先卸载掉用 cnpm 安装

祝你成功!

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值