开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:前端技术— webpack 打包 css 文件】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11327
前端技术—webpack 打包 css 文件
内容简介
一、创建 CSS 文件，写样式内容
二、在 main.js 中引入 css 文件
三、安装 css 加载工具
四、修改 webpack 配置文件
一、创建 CSS 文件，写样式内容
Bundle.js 中不仅包含js文件，还包含 css 文件。
1. 首先在 SRC 文件下方新建一个 CSS 文件，命名为 style.css,创建一个简单样式。
（1）body{
（2）Background-color:red
（3）}
这是一个将背景设置成红色的简单样式。
二、在 main.js 中引入 css 文件
1. const common = require(‘./common.js’)
2. Const utils=require(‘.utils.js’)
3.
4. //css文件引入
5. Require(‘./style.css’)
6.
7. Common.info(‘hello common ‘+utils.add(1,2))
注意，一切 css 的后缀都不可以省略。
三、安装 css 加载工具
首先通过 npm install- -save-dev style-loader css-loader,回车后联网下载加载器。
四、修改 webpack 配置文件
打开 webpack.comfig.js,运行
Const path = require(“path”):// Node.js内置模块
Module.exports={
entry:”./src/main.js’,//配置入口文件
output:{
path:path.resolve(_dirname,’/dist),//输出路径,_diename: 当前文件
filename:’bundle.js’//输出文件
},
moudle:{
rules:[
{
tset:|\.css&/，//打包规则应用到以css结尾的文件上
use:[‘style-loader’,’css-loader’]
}
}
}
}
首先删掉 bundles.js, 运用 webpack--mode=development 做一个打包，打包后多了一个与 css 有关的文件，在浏览器刷新后得到了红色的背景，完成了 css 的打包。
运用 npm 命令也可以打包，npm run dev,两种方式都可以对 css 文件进行打包。
