Can't load png and gif images in webpack.config.js - unit-testing

Question

Can't load png and gif images in webpack.config.js
This issue came while running unit test using Mocha-webpack.
Here I have pasted my webpack.config.js.
How can I fix this issue??
I have tried with the image loader too for fix this, It won't work.
Any other way to fix this type of loader issue?
Here is the screenshot for that issue
'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

Did you try using url-loader for loading images?
Like just replacing
{
test: /\.(png|jpg|gif|svg|css|eot|ttf)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
with
{
test: /\.(png|jpg|gif|svg|css|eot|ttf)$/,
loader: 'url-loader',
}