流程如下：1.先把css和js打包到一起 2.把打包到js文件中的css代码在html中创建一个style标签 把这个css值入这个html中
需要两个loader:
css-loader 为了完成第一步
style-loader 为了完成第二步
下载loader
npm i css-loader style-loader -D
代码：
const {resolve} = require(‘path’);
const htmlWebpackPlugin=require(‘html-webpack-plugin’);
module.exports={
mode:“development”,
//如果只有一个入口 使用字符串配置即可，打包后就会只有一个chunk和bundle chunk是默认的
//如果多个入口所有的入口形成一个chunk名称是默认的 chunk最终的输出也会是一个bundle
//混合写法如下：
//
entry:{
vendor:["./src/js/jquery.js","./src/js/common.js"],
index:"./src/js/index.js",
cart:"./src/js/cart.js"
},
“output”:{//输出的目录
filename:"[name].js", //输出的文件
path:resolve(__dirname,“build”)//输出的路径 找项目的根目录打包 所以需要导入一个path包专门处理路径的问题
},
module:{
rules:[{test:/.css$/, //匹配规则 后缀为css的文件
use:[“style-loader”,“css-loader”]// 从右到左 从上到下的顺序
}]
},
plugins:[
new htmlWebpackPlugin({
template:"./src/index.html",//需要打包的html
filename:“index.html”,//打包后html叫这个名字
chunks:[“index”,“vendor”],//注意顺序先加载vendor 如果不指定加载那个js 那么会把所有的js都加载到当前的html
minify:{
collapseWhitespace:true, //移除html自己的空格 非文本中的空格
removeComments:true//移除注释
}
}), //默认会创建一个空得到html名称为index.html 并且引入所有的css打包资源
new htmlWebpackPlugin({
template:"./src/cart.html",//需要打包的html
filename:"cart.html",//打包后html叫这个名字
chunks:["cart","vendor"],//注意顺序先加载vendor 如果不指定加载那个js 那么会把所有的js都加载到当前的html
minify:{
collapseWhitespace:true, //移除html自己的空格 非文本中的空格
removeComments:true//移除注释
}
})
]
}
style.css
#box{
width:200px;
height:200px;
color:red;
background:green
}
index.js
require("…/style.css")
