javascript - 在 webpack 中设置文件加载器会在构建时产生错误
问题描述
这就是我的 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'
我不太确定我在这里做错了什么:(仅供参考:这实际上dist/assets/img/THE_ACTUAL_IMAGE_FILE
按预期保存了图像
解决方案
推荐阅读
- axios - React - api调用返回未定义
- python - ModuleNotFoundError 但仅在嘲笑时
- javascript - 在 Squarespace 弹出事件侦听器/触发器之后运行代码
- flutter - 无法读取图像:错误:“未来”类型的值
'不能分配给'文件'类型的变量 - python - 计算具有不同数量的圆的圆交点
- django - 通过字段值检查项目是否存在于数据库中
- rust - 为什么 std::cell::Ref 没有 Hash/PartialEq/Eq 实现
- c# - 自动映射儿童注入数据
- python - 即使值更改,模型字段也不会在管理页面中更新
- python - 如何使用有限差分计算数组的导数?