Question

我有一个非常奇怪和令人沮丧的问题。执行我的Web应用程序时，我在导入的图像文件上遇到错误，如下所示：

-- In my .js file
import menuIcon from 'images/dot_menu.png';

-- Output I get when running npm start
ERROR in ./app/images/dot_menu.png
Module build failed (from ./node_modules/image-webpack-loader/index.js):
Error: The system cannot find the path specified.

at notFoundError (D:\ui\node_modules\cross-spawn\lib\enoent.js:6:26)
at verifyENOENT (D:\ui\node_modules\cross-spawn\lib\enoent.js:40:16)
at ChildProcess.cp.emit (D:\ui\node_modules\cross-spawn\lib\enoent.js:27:25)
at Process.ChildProcess._handle.onexit (internal/child_process.js:240:12)

图像文件如图所示位于D:\ui\app\images中，但是我也尝试将其复制到与JS文件相同的目录中，并将导入更改为“ ./dot_menu.png”，但仍然抛出相同的结果错误。

让我感到特别奇怪的是，我是一个五人团队的成员，而且我是唯一遇到此错误的人。我尝试重新生成package-lock.json文件并删除我的node_modules目录，因为有时这可以清除怪异的问题，但在这种情况下无济于事。另一位团队成员在结束时做了同样的事情，看他们是否可以进入我所处的状态，但是他们也没有成功-他们的应用程序没有出错并且执行得很好。

最后一条信息-JPG，GIF和PNG文件会发生此问题，而SVG文件不会发生。

这是 webpack.base.babel.js 文件的相关部分，尽管我无法想象这会引起问题，因为所有其他团队成员也在使用同一文件：< / p>

module: {
  rules: [
    {
      test: /\.(eot|svg|otf|ttf|woff|woff2)$/,
      use: 'file-loader',
    },
    {
      test: /\.(jpg|png|gif)$/,
      use: [
        'file-loader',
        {
          loader: 'image-webpack-loader',
          options: {
            query: {
              gifsicle: {
                interlaced: true
              },
              mozjpeg: {
                progressive: true
              },
              optipng: {
                optimizationLevel: 7
              },
              pngquant: {
                quality: '65-90',
                speed: 4
              }
            }
          },
        },
      ],
    },
  ]
},
resolve: {
  alias: {
    Data: path.resolve(__dirname, 'app/data/')
  },
  modules: ['app', 'node_modules'],
  extensions: [
    '.js',
    '.jsx',
    '.scss',
    '.react.js'
  ],
  mainFields: [
    'browser',
    'jsnext:main',
    'main'
  ]
}

来自 package.json ：

"devDependencies": {
  "file-loader": "1.1.11",
  "image-webpack-loader": "^4.3.1",
  "webpack": "^4.12.0",
}

因此，我正在寻求一些帮助来调试此问题并弄清楚这里发生了什么。我很乐意根据要求提供其他文件中的更多信息或复制粘贴，但我什至不知道从哪里开始。让我知道我还能提供什么来协助解决问题。谢谢！

Webpack / Babel找不到图像导入路径

0 个答案: