Webpack / Babel не находит пути импорта изображений - PullRequest
Новая
       8

Webpack / Babel не находит пути импорта изображений

0 голосов
/ 08 января 2019

У меня очень странная и неприятная проблема. При выполнении моего веб-приложения я получаю ошибки в импортированных файлах изображений, например: 

-- 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 , хотя я не могу представить, что это вызывает проблему, поскольку все остальные члены команды тоже используют этот файл: 

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",
}

Так что мне нужна помощь в устранении этой проблемы и выяснении того, что здесь происходит. Я буду рад предоставить дополнительную информацию или скопировать из других файлов по запросу, но я даже не знаю, с чего начать. Дайте мне знать, что еще я могу предоставить, чтобы помочь в решении проблемы. Спасибо!

...