我们知道webpack的优点之一就是专注于处理模块化的项目,能做到开箱即用，但同时这也是webpack的缺点，只能用于模块化开发的项目，例如：Vue,React,Angular。Webpack在进行打包编译时会将所有依赖的模块合并到一个bundle.js中,但是Webpack不支持解析原生的CSS文件,要支持非JavaScript类型的文件,则需要使用Webpack的Loader机制。如下：
关于Loader的定义：
Loader可以看做是具有文件转换功能的翻译员,我们在module.rules里配置了一组关于CSS转换规则,告诉Webpack再遇到CSS文件时该使用哪些Loader，同理，配置其他规则也一样,在上面CSS的配置规则中,我们告诉Webpack再遇到.css结尾的文件时,先试用css-loader读取CSS文件,再由style-loader将CSS的内容注入JavaScript里。在配置Loader是需要注意：
1. use属性的值需要是一个由Loader名称组成的数组,Loader的执行顺序是由后到前；
2. 每个Loader都可以通过 URL querystring 的方式传入参数,例如 css-loader?minimize中的minimize告诉css-loader要开启CSS压缩。
style-loader的作用：
将css的内容用JavaScript里的字符串存储起来,在网页执行JavaScript时通过DOM操作动态地向 HTML head标签里插入 HTML style 标签.
最后我们再来看看关于Loader传入属性的两种方式：
1. 通过 URL querystring 的方式传入参数:
eg: css-loader?minimize
2.通过 Object 的方式 传入属性：
eg：use:[
' style-laoder ',
{
loader:' css-loader ',
options:{
minimize:true
}
}
]