webpack打包css

1.打包css

2.打包逻辑

1-1.webpack打包css逻辑

 非js文件打包 需要对应的loader
 css-loader将css转化为js
 style-loader把包含css内容的js代码 挂载到页面的<style>标签
 引入css（import "./css/main.css"）
 安装（npm i css-loader style-loader -D）
 配置后缀名 ：test:/\.css$/i
 指定加载器 ：use:['style-loader','css-loader']
 webpack打包css
 loader执行顺序：先右后左（先下后上）

3.打包css

先是创建一个main.css,我们在main.css写上我们自己所需要的样式

我们在切换到indx.js中把我们刚刚写的css样式引入到index.js里面

我们看到看到 报错 报错内容是我们的css不被识别 我们需要安装一个插件

npm i -D css-loader style-loader

我们安装好以后但是还是识别不了我们需要去做一个配置

这时我们在输入webpack就会发现没有报错了

你会发现这里面有我们刚写的css样式

我们创建一个新的文件夹 起名叫index.html 里面引入我们打包后的js

serve

打开项目

我们可以看到local 后面5000 打开以后