文件加载器创建了2个图像并链接了错误的图像

Question

file-loader正在我的构建文件夹中创建两个独立的图像。一个被正确命名并保存在正确的路径中，另一个被命名为[hash].png(这是默认的)并存储在build中，而不是build/images中。第二个错误的文件是0字节;这是在构建文件夹中的最终index.html文件中链接的那个。我已经定义了outputPath和publicPath。不管我放了什么，publicPath似乎并没有真正做任何事情。我是不是误解了它的作用?

module.exports = {
entry: {
index: './app/main.js',
vendor: './app/vendor.js'
},
output: {
path: path.resolve(__dirname, './build'),
filename: '[name].[contenthash].js',
},
module: {
rules: [
{
test: /.js$/,
exclude: [/node_modules/, /api/, /tests/, /coverage/],
use: 'babel-loader'
},
{
test: /.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /.html$/,
use: 'html-loader'
},
{
test: /.(svg|png|jpg|gif)$/,
use:{
loader: 'file-loader',
options: {
name: '[name].[hash].[ext]',
outputPath: 'images/',
publicPath: 'images/'
}
}
},
]        
},
plugins: [
new HtmlWebpackPlugin({ template: './app/index.html' }), 
new CleanWebpackPlugin()
]
};

图片链接:

<img src="465107fe07e3ec18a463.png">

另一个帖子有同样的问题，没有得到任何答案:Webpack，我试图使用文件加载器加载图像，但每当我运行构建我得到2图像不是1和一个链接到html文件是错误的

Answer 1

我终于想通了。从Webpack 5.0开始，无需安装加载程序就可以处理这个问题。所以file-loader, url-loader, raw-loader等现在已经过时了。

https://webpack.js.org/guides/asset-modules/

Answer 2

这是file-loaderv6的一个问题。我用添加esModule选项的方式解决了这个问题。

html-loader,css-loader和使用图像url的加载器都需要esModule选项false。

或者你应该使用file-loader，除了v6。

{
loader: 'css-loader',
options: {
esModule: false
}
},

Answer 3

{
test: /.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},