image-webpack-loader安装失败怎么破_超神熊猫

highlight: agate theme: channing-cyan

我正在参加「掘金·启航计划」
前言
最近项目中使用到了image-webpack-loader这个插件，在打包的时候对项目中的图片资源进行压缩，但是发现这个依赖包在安装的时候真的是一波三折，经过一通捣鼓，发现了一些原因，这里记录一下历程

先上答案

老规矩，写文章习惯性先把最后的结论或者成果直接放到文章前面，如果不想了解具体内容的，只想解决问题的，就只看到答案即可了 1. 通过cnpm安装 2. 给raw.githubusercontent.com这个地址配置host，教程 3. 手动压缩图片

一、导图梳理

二、问题分析：

问题点：
package.json如下 js { "name": "pc", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "image-webpack-loader": "^8.1.0" } } npm install 安装依赖
出现以下报错
``` shell

[email protected] postinstall D:\wjr_project\package-demo\pc-yarn\node_modules\gifsicle node lib/install.js

getaddrinfo ENOENT raw.githubusercontent.com gifsicle pre-build test failed compiling from source Error: Command failed: C:\Windows\system32\cmd.exe /s /c "autoreconf -ivf" ``` 从报错信息得到的信息点 1. 在安装gifsicle这个依赖的时候，该依赖包会执行node lib/install.js 这个段脚本 2. raw.githubusercontent.com 这个地址连接失败

既然是gifsicle这个包执行install.js这个脚本报错了，我们先去看看这个包，看包的话先从packag-lock.json或者是yarn.lock依赖树去查看包的依赖

找到对应的包后

直接在node_module 里面看源码查看install.js的问题
去github上找到这个并且查看issues查看有没有人提类似的问题（有一定概率快速找到解决问题的办法）

去github上找依赖包，不要直接去github上搜，因为该包名和在github上的仓库名不一定是一致的，正确的方法应该是先去npm上搜包，然后从npm中里面跳到对应的github仓库

从图上可以看到，这个包名叫gifsicle但是实际上对应的github仓库是gifsicle-bin

在issues中能找到已经有人提到最终怎么解决的（通过cnpm安装），这里找到了一种解决办法

虽然找到了一种解决办法，但是还没找到问题导致的原因，我们继续去排查包的代码

继续分析安装报错的点 ```

[email protected] postinstall D:\wjr_project\package-demo\pc-yarn\node_modules\gifsicle node lib/install.js

getaddrinfo ENOENT raw.githubusercontent.com gifsicle pre-build test failed compiling from source Error: Command failed: C:\Windows\system32\cmd.exe /s /c "autoreconf -ivf" ``` 从上面看到安装依赖的时候，安装完后执行install.js这个文件，我们就去依赖包源码里面看到对应的代码

install.js ```js import process from 'node:process'; import {fileURLToPath} from 'node:url'; import binBuild from 'bin-build'; import bin from './index.js';

(async () => { try { await bin.run(['--version']); console.log('gifsicle pre-build test passed successfully'); } catch (error) { console.warn(error.message); console.warn('gifsicle pre-build test failed'); console.info('compiling from source');

    const config = [
        './configure --disable-gifview --disable-gifdiff',
        `--prefix="${bin.dest()}" --bindir="${bin.dest()}"`,
    ].join(' ');

    try {
        const source = fileURLToPath(new URL('../vendor/source/gifsicle-1.93.tar.gz', import.meta.url));
        await binBuild.file(source, [
            'autoreconf -ivf',
            config,
            'make install',
        ]);

        console.log('gifsicle built successfully');
    } catch (error) {
        console.error(error.stack);

        // eslint-disable-next-line unicorn/no-process-exit
        process.exit(1);
    }
}

})(); index.js js import fs from 'node:fs'; import process from 'node:process'; import {fileURLToPath} from 'node:url'; import BinWrapper from 'bin-wrapper';

const pkg = JSON.parse(fs.readFileSync(new URL('../package.json', import.meta.url))); const url = http://raw.githubusercontent.com/imagemin/gifsicle-bin/v${pkg.version}/vendor/;

const binWrapper = new BinWrapper() .src(${url}macos/gifsicle, 'darwin') .src(${url}linux/x86/gifsicle, 'linux', 'x86') .src(${url}linux/x64/gifsicle, 'linux', 'x64') .src(${url}freebsd/x86/gifsicle, 'freebsd', 'x86') .src(${url}freebsd/x64/gifsicle, 'freebsd', 'x64') .src(${url}win/x86/gifsicle.exe, 'win32', 'x86') .src(${url}win/x64/gifsicle.exe, 'win32', 'x64') .dest(fileURLToPath(new URL('../vendor', import.meta.url))) .use(process.platform === 'win32' ? 'gifsicle.exe' : 'gifsicle');

export default binWrapper; ```

会动态从raw.githubusercontent.com这个地址里面拉取一些文件，由于拉取不下来，导致无法安装，后来百度了一下raw.githubusercontent.com这个地址，是被墙的一个地址，我们本地无法连接，这也就是为什么npm或者yarn直接通过淘宝镜像安装依赖也无法安装成功的原因，因为安装依赖的时候使用镜像，只对安装依赖加速有作用，包里面代码的动态从指定地址raw.githubusercontent.com拉取文件是无法起到镜像作用的

既然是因为raw.githubusercontent.com无法连接，科普了一下需要配置host即可访问，在ipaddress.com查到ip地址，配置host即可访问，也可以成功安装依赖了

这里就是第二种解决办法

三、最终解决方案

使用image-webpack-loader这个插件的目的，本就是为了在打包的时候压缩图片，减少包体大小，那么结合上面的问题分析，得到的最终解决方案有三种

通过cnpm安装
给raw.githubusercontent.com这个地址配置host
手动压缩图片