我在html里面使用img，然后通过file-loader，html-withimg-loader，html-webpack-plugin去打包
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<img src="./logo.jpg" alt="" srcset="">
</div>
</body>
</html>
webpack.config.js
'use strict';
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'dist'),
filename: '[name]_[contentHash:8].js'
},
mode: 'production',
stats: { children: false },
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader'
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ["file-loader"]
},
{
test: /\.html$/,
use: ["html-withimg-loader"]
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src/index.html'),
filename: 'index.html',
chunks: '[index]',
inject: true,
minify: {
html5: true,
collapseWhitespace: true,
preserveLineBreaks: false,
minifyCSS: true,
minifyJS: true,
removeComments: false
}
}),
],
};
图片有打包成功，但是有报错，html生成错误
版本webapck：4.41.2，file-loader:5.0.2，html-withimg-loader:0.1.16，html-webpack-plugin：3.2.0
已解决
悬赏分：50
- 解决时间 2021-11-26 20:28
点赞 0反对 0举报 0
收藏 0
分享 0
回答2
最佳
-
"file-loader": "^4.2.0" 是好的
如果使用"file-loader": "^5.0.2"，在webpack.config.js里修改配置项：
{ test: /\.(png|svg|jpg|gif)$/, use:[ { loader: "file-loader", options: { esModule: false, }, } ] },设置esModule为false
参见：
支持 0 反对 0 举报2021-11-26 07:11
