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

时间 2019-12-26

标签 webpack 图片压缩 image loader 没法安装卡死解决办法繁體版

原文原文链接

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

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

{
    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 试试，因而就抱着试试的心态，一试果真成功了，哈哈哈，美滋滋！前端

具体操做java

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

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

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

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

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

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

注：若是先前尝试使用 yarn 或 npm 安装过，必定要先卸载掉用 cnpm 安装bash

祝你成功！svg