webpack之Loader

　　我们知道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

　　　　　　　　　　}

　　　　　　　　}

　　　　　　]