Вот так выглядит мой webpack.config.babel.js:
import path from 'path'
import MiniCssExtractPlugin from 'mini-css-extract-plugin'
const out = path.resolve(__dirname, './dist')
const client = path.resolve(__dirname, './src/client')
export default {
entry: {
main: `${client}/index`,
plugins: `${client}/plugins`
},
output: {
path: `${out}`,
filename: 'js/[name].js',
chunkFilename: 'js/[name].js'
},
module: {
rules: [
{
test: /\.jsx?/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.scss$/,
use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'assets/img/[name].[ext]'
}
}
]
}
]
},
optimization: {
runtimeChunk: {
name: 'manifest'
},
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
priority: -20,
chunks: 'all'
}
}
}
},
target: 'web',
cache: true,
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].css'
})
]
}
Итак, как вы можете видеть, я использую загрузчик файлов для png, svg, gif и jpg.Затем я импортирую изображение следующим образом:
import img404 from '../../assets/img/404-error.svg'
, но постоянно получаю эту ошибку: 
Я не совсем уверен, что делаю неправильноздесь :( FYI: Это на самом деле сохраняет изображение в dist/assets/img/THE_ACTUAL_IMAGE_FILE
, как ожидалось