极客观点
项目管理
HarmonyOS
我在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
"file-loader": "^4.2.0"是好的如果使用
"file-loader": "^5.0.2"，在webpack.config.js里修改配置项：设置
esModule为false参见：
