编译报错

html：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<h1>webpack</h1>
<a href="">webpack</a>
<img src="src/img/photo-1644962986863-d075ee548966.jpeg" alt="">
</body>

</html>

css：

body {
/* background-image: url(img/photo-1644962986863-d075ee548966.jpeg); */
background-repeat: no-repeat;
background-color: black;
}

js：

import './index.css';
console.log('index');

webpack：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
mode: 'development',
entry: './src/1.js',
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.css$/,
use: [{
loader: MiniCssExtractPlugin.loader,
options: { publicPath: '../' }
}, 'css-loader']
},
{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'file-loader',
options: {
name: 'img/[name].[ext]'
}
}
},
{
test: /\.(html|htm)$/,
loader:'html-withimg-loader'
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './1.(html|htm)'
}),
new MiniCssExtractPlugin({
filename: 'css/[name].css'
})
],
};

xEasonWang 2022-02-18

源自：Babel 与 Webpack 5-6 使用html-withimg-loader处理HTML中的图片

收起

1回答

好帮手慕星星 2022-02-18 18:06:27

同学你好，同学能打包成功吗？这边测试粘贴代码没有报错

建议将报错信息截图完整，否则看不出来原因，无法帮助解决。

祝学习愉快~

收起回答

提问者 xEasonWang #1

错误内容是
ERROR in Error: Child compilation failed:
Module not found: Error: Can't resolve '/Users/xeasonwang/Desktop/webpack/index.html' in '/Users/xeasonwang/Desktop/webpack'
ModuleNotFoundError: Module not found: Error: Can't resolve '/Users/xeasonwang/Desktop/webpack/index.html' in '/Users/xeasonwang/Desktop/webpack'
所有插件都已安装正确

2022-02-21 13:41:22
提问者 xEasonWang #2

所有文件位置名称都正确，只有html文件编译不成功

2022-02-21 13:46:15
好帮手慕慕子回复提问者 xEasonWang #3

同学你好，看你粘贴的报错信息是找不到对应的html文件，建议检查下引入文件的路径或者文件名书写是否有问题，如果排查后，还存在问题，可以查看下私信，老师在私信中帮助同学解决，祝学习愉快~

2022-02-21 14:02:26