04-webpack打包css资源
1. 下载两个loader插件
npm i css-loader style-loader -D
css-loader 的作⽤是处理css中的 @import 和 url 这样的外部资源
style-loader 的作⽤是把样式插⼊到 DOM中，⽅法是在head中插⼊⼀个style标签，并把样式写⼊到这个标签的 innerHTML⾥，就是内联样式
如果rules只⽤⼀个loader, 就use:[] 写成loader: “css-loader”
2. 使⽤插件
const{resolve}=require("path")//从path中接收resolve⽅法
const htmlWebpackPlugin =require("html-webpack-plugin")//引⼊html打包插件
entry:{
vendor:["./src/js/jq.js","./src/js/common.js"],
index:"./src/js/index.js",
cart:"./src/js/chart.js"
},
output:{
path:resolve(__dirname,"./build"),//输出路径
filename:"[name].js"//输出⽂件名
},
mode:"development",//webpack使⽤相应的模式配置
module:{//css打包规则
rules:[{
test:/\.css$/,//把项⽬中所有以.css结尾的⽂件打包，插⼊到html⾥
use:["style-loader","css-loader"]
// use数组中loader执⾏顺序：从右到左，从下到上依次执⾏
//style-loader 创建style标签，将js中的样式资源插⼊进⾏，添加到head中⽣效
//css-loader 将css⽂件变成commonjs模块加载js中，⾥⾯内容是样式字符串
}]
},
plugins:[
//默认创建⼀个空的html，⽬的就是⾃动引⼊打包的资源js/css
new htmlWebpackPlugin({//引⽤插件
template:"./src/index.html",//index.html不⽤加script，也可以⾃动引⼊js⽂件
filename:"index.html",//输出的打包的⽂件名
chunks:['index','vendor'],
// 压缩html代码
minify:{
//移除空格
collapseWhitespace: true,
//移除注释
removeComments: true
}
}),
new htmlWebpackPlugin({//引⽤插件
template:"./src/chart.html",//index.html不⽤加script，也可以⾃动引⼊js⽂件
filename:"chart.html",//输出的打包的⽂件名
chunks:['cart','vendor']
})
]
}
3. ⽬录结构
style.css
body {
margin:0;
padding:0;
}
p {
color: red;
font-size:25px;
}
h1 {
color: blue;
font-size:88px;
}
.box {
width:100px;
height:150px;
background-color: bisque;    color: blueviolet;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <title>Title</title>
</head>
<body>
<h1>商城⾸页~~~~~~</h1> <p>打包css</p>
<div class="box">
this is a box1
</div>
<div class="box2">
this is a box2
</div>
<div class="box3">
this is a box3
</div>
</body>
</html>
webpack打包流程 面试index.js
//引⼊css⽂件（commonjs）require("../css/style.css")
//也可以使⽤ES6的模块引⼊//import "../css/style.css" console.log("⾸页专⽤js⽂件");
4. 执⾏webpack
css以内联样式插⼊到html⽂件⾥

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。