webpack打包
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 打开以后