找不到用于加载图像的模块“gifsicle”-webpack答案

【问题标题】：Cannot find module 'gifsicle' for loading image -webpack找不到用于加载图像的模块“gifsicle”-webpack
【发布时间】：2021-03-16 17:22:42
【问题描述】：

我创建了一个 webpack 项目。因为我的项目在我的机器上运行，但是在我所有在他们的机器上安装了 ubuntu 的队友笔记本电脑中（我的是 zorin - 基于 ubuntu 的发行版），如果他在项目中使用图像，则开发服务器会抛出以下错误.但我可以在我的机器上的同一个项目中使用图像。我无法弄清楚问题是什么。

ERROR in ./images/favicon.png
Module build failed (from ../node_modules/image-webpack-loader/index.js):
Error: Cannot find module 'gifsicle'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/home/ranjith/Desktop/project/FORTRAN/node_modules/imagemin-gifsicle/index.js:3:18)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
 @ ./index.html (../node_modules/html-webpack-plugin/lib/loader.js!./index.html) 3:33-64

这是我的代码

.mainLogo {
  background: url('../../images/logo/logo_mini_dark.jpg');
  background-repeat: no-repeat;
  width: 3rem;
  height: 3rem;
}


Here is my webpack configuration for images

   {
        test: /\.(gif|png|svg|jpeg|jpg)$/i,
        exclude: /fonts/,
        use: [
            {
                loader: 'file-loader',
                options: {
                    name: '[name].[contenthash].[ext]',
                    outputPath: 'images',
                }
            },
            {
                loader: 'image-webpack-loader',
                options: {
                    name: '[name].[contenthash].[ext]',
                    outputPath: 'images',
                }
            },
        ],
    },

【问题讨论】：

标签： webpack webpack-dev-server webpack-style-loader webpack-loader

【解决方案1】：

根据快速谷歌搜索，似乎只有两个选项：

安装dh-autoreconf，如果您正在使用容器，您可能不喜欢它，因为它对于容器来说太大了（然后再次运行npm install，以便重新编译gifsicle）：

    $ apt-get install dh-autoreconf

将gifsicle 固定到package.json 中的v4.0.1：

    "resolutions": {
        "gifsicle": "4.0.1"
      }     
    }

npm 尚未支持“分辨率”（与 yarn 不同），您还需要安装 npm-force-resolutions（不适用于 npm 7）。

来源：

【讨论】：

其实我早就解决了，但是忘了在这里回答。这正是我解决问题的方法。就我而言，另一个问题是我们使用了不同版本的 node 和 npm。我们已经将它更新到相同的版本，它得到了解决。谢谢你的热心帮助。???