找不到用于加载图像的模块 'gifsicle' -webpack

Question

我创建了一个 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

This is my code

.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',
                }
            },
        ],
    },

Answer 1

image-webpack-loader@8 的答案

就像他们的自述文件解释的那样，要安装它（并构建 gifsicle 它取决于），node alpine 需要这个脚本：

RUN apk add --no-cache autoconf automake file g++ libtool make nasm libpng-dev

Node Buster Slim：

RUN apt-get update && apt-get install -y --no-install-recommends autoconf automake g++ libpng-dev make

Node Buster - 无需额外准备，图像大小很大，但如果您有一个多阶段 docker 构建，通常是 'builder'、'remover' 和 'production'，那么buster也是不错的选择。

上一个回答

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

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

    $ apt-get install dh-autoreconf

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

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

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

来源：

找不到用于加载图像的模块 'gifsicle' -webpack

Cannot find module 'gifsicle' for loading image -webpack

webpack

webpack-dev-server

webpack-style-loader

webpack-loader

image-webpack-loader@8 的答案

上一个回答