Не удается загрузить изображения png и gif в webpack.config.js

Question

Не удается загрузить изображения в формате png и gif в webpack.config.js

Эта проблема возникла при запуске модульного теста с использованием Mocha-webpack.
Здесь я вставил свой webpack.config.js.
Как я могу решить эту проблему ??

Я тоже пытался с загрузчиком изображений исправить это, оно не будет работать.
Есть ли другой способ исправить проблему с загрузчиком?

Вот скриншот для этой проблемы

'use strict'

var path = require('path')
var webpack = require('webpack')

module.exports = {
entry: './src/main.js',
// output: {
//   path: path.resolve(__dirname, './dist'),
//   publicPath: '/dist/',
//   filename: 'build.js'
// },
resolve: {
extensions: ['.js', '.jsx', '.css'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': path.resolve(__dirname, 'src')
 }
},
module: {
rules: [
 {
  test: /\.vue$/,
  loader: 'vue-loader'
 },
 {
  test: /\.js$/,
  loader: 'babel-loader',
  exclude: /node_modules/
 },
 {
 test: /\.(png|jpg|gif|svg|css|eot|ttf)$/,
 loader: 'file-loader',
 options: {
  name: '[name].[ext]?[hash]'
  }
 },
 {
 test: /\.(jpg|jpeg|gif|png|css)$/,
 loader: [ 'css-loader' ]
 },
  {
  test: /\.(jpg|jpeg|gif|png)$/,
  loader:'url-loader?limit=1024&name=images/[name].[ext]'
  },
 {
  test: /\.(woff|woff2|eot|ttf|svg|png|gif)$/,
  loader: 'url-loader?limit=1024&name=fonts/[name].[ext]'
 },
 {
  test: /\.(png|jpg|svg)$/,
  loader: 'file-loader',
  query: {
    name: './src/assets/[name]-[sha512:hash:base64:7].[ext]',
  },
 },
  {
    test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|eot|ttf)$/,
    loader:['url-loader?limit=10000',
    'img-loader']
  },
  {
     test: /\.(woff(2)?|ttf|eot|png|gif|svg)(\?v=\d+\.\d+\.\d+)?$/,
     use: [{
         loader: 'file-loader',
         options: {
             name: '[name].[ext]',
             outputPath: 'fonts/'
         }
     }]
    }
    ]
    },
 devServer: {
 historyApiFallback: true,
 noInfo: true
 },
 performance: {
 hints: false
 },
devtool: '#eval-source-map'
}


 // test specific setups
if (process.env.NODE_ENV === 'test') {
module.exports.externals = [require('webpack-node-externals')()]
module.exports.devtool = 'eval'
devtool: 'inline-cheap-module-source-map'
}

Answer 1

Вы пытались использовать url-loader для загрузки изображений?

Как только замена

{
  test: /\.(png|jpg|gif|svg|css|eot|ttf)$/,
  loader: 'file-loader',
  options: {
    name: '[name].[ext]?[hash]'
  }
}

с

{
  test: /\.(png|jpg|gif|svg|css|eot|ttf)$/,
  loader: 'url-loader',
}