编译报错

编译报错

https://img1.sycdn.imooc.com//climg/620f6b1b09b2281914640160.jpg

https://img1.sycdn.imooc.com//climg/620f6b1c097ba6ba06920424.jpg

html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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:

1
2
3
4
5
body {
/* background-image: url(img/photo-1644962986863-d075ee548966.jpeg); */
background-repeatno-repeat;
background-colorblack;
}

js:

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

webpack:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
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'
})
],
};


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

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

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

https://img1.sycdn.imooc.com//climg/620f6f470929974601800091.jpg

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

祝学习愉快~

  • 提问者 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
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师
插入代码