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

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

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

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

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

具体操作

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

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

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

npm install cnpm -g --registry&＃61;https://registry.npm.taobao.org

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

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

注&＃xff1a;如果先前尝试使用 yarn 或 npm 安装过&＃xff0c;一定要先卸载掉用 cnpm 安装

祝你成功&＃xff01;