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
}
}
]
最新文章
- mapreduce.framework.name
- Ruby中的语句中断和返回
- 好记心不如烂笔头之jQuery学习,第一章
- Windows Phone 8.1开发：如何让ListView滚动到顶部，回到第一条？
- 数据结构——HDU1312：Red and Black(DFS)
- 记npm包开发全过程
- JQ点击列表显示隐藏
- spring与redis集成之aop整合方案
- 什么是 stack？- 每天5分钟玩转 Docker 容器技术（111）
- c++随机排序容器中的元素
- Xilinx FPGA引脚txt文件导入excel中
- C#调用DLL文件提示试图加载格式不正确的程序
- request.getRequestDispatcher跳转jsp页面失败
- HDMI接口之HPD（热拔插）
- Python-Django Win7上使用Apache24和mod_wsgi部署Django1.11应用程序
- JaveScript 中的正则表达式
- transform: translate(-50%, -50%) 实现块元素百分比下居中
- 网站SEO优化问答精选【转载】
- GitHub入门与实践 读书笔记二：Git的导入
- 将JSON数据转换成JAVA的实体类