时间戳

首页 > 解决方案 > 找不到用于加载图像的模块“gifsicle”-webpack

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

问题描述

我创建了一个 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',
                }
            },
        ],
    },

标签： webpackwebpack-dev-serverwebpack-style-loaderwebpack-loader

解决方案

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

  • dh-autoreconf如果您使用容器，则安装您可能不喜欢的，因为它对于容器来说是巨大的（然后npm install再次运行以便gifsicle重新编译）：
    $ apt-get install dh-autoreconf
  • 固定到v4.0.1gifsicle中package.json：
    "resolutions": {
        "gifsicle": "4.0.1"
      }     
    }

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

资料来源：

推荐阅读