开发者学堂课程【前端自动化构建工具 Webpack：复习 - webpack 基本配置2】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/587/detail/8221
在页面里引入一些样式，新建一个文件名为 css，在建立一个 index.Css
Index.css 文件：
html,body{
Margin:0;
Padding:0;
Background-color:cyan;
Main.js 文件：
//项目的js入口文件
Console.log(‘ok’)
Import ‘./css/index.css’
Import’./css/index.scss’
Webpack.config.js 文件：
modul exports ={
entry:path.join( dirname,'./src/main.js')，
// 入口文件output:{ // 指定输出选项
path: path.join( dirname,'/dist')，
// 输出路径filename:'bundle.js'// 指定输出文件的名称
}.
plugins:{//所有webpack插件的配置节点
new htmlWebpackPlugin({
template: path.join(__dirname,'/src/index.html')，// 指定模板文件路径
filename:'index.html'//设置生成的内存页面的名称
})
]，
module:{ // 配置所有第三方loader模块的
rules:[ // 第三方模块的匹配规则
{ test:/ \.css$/, use: ['style-loader','css-loader'] }，// 处理css文件的 loader
{test:/\.less$/,use:['style-loader','css-loader','less-loader'] }，//处理 less 文件的loader
{test:/\.scss$/,use:['style-loader','css-loader','sass-loader'] }，//处理scss文件的loader
新建index.scss 写完代码并保存
Html,body{
.box{
Width: 220px;
Height: 120px;
Background-color:red
}
}
运行结果：
