image-webpack-loader安装失败怎么破

先上答案

老规矩，写文章习惯性先把最后的结论或者成果直接放到文章前面，如果不想了解具体内容的，只想解决问题的，就只看到答案即可了

1. 通过cnpm安装
2. 给raw.githubusercontent.com这个地址配置host，教程
3. 手动压缩图片

一、导图梳理

二、问题分析：

问题点： package.json如下

{
  "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   安装依赖 出现以下报错

> gifsicle@5.2.1 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依赖树去查看包的依赖

找到对应的包后

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

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

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

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

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

继续分析安装报错的点

> gifsicle@5.2.1 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

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

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 = `https://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这个插件的目的，本就是为了在打包的时候压缩图片，减少包体大小，那么结合上面的问题分析，得到的最终解决方案有三种

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