Webpack框架核心概念(知识点整理)


Posted in Javascript onDecember 22, 2017

webpack是什么

webpack是一个前端构建的打包工具(并不是什么库或框架), 它能把各种资源,例如JS(含JSX)、coffee、css(含less/sass)、图片等都作为模块来处理和使用。

Webpack框架核心概念(知识点整理)

1.基础知识点

1.1 webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

1.2webpack的四个核心概念:

1.2.1 entry(入口):entry point,入口起点(可以有多个),webpack会从该起点出发,找出哪些文件时入口文件所依赖的,从而构建内部依赖关系图,并处理后输出到称之为bundles的文件中

1.2.2 output(输出):指定经entry point处理后的bundles文件的输出路径(path)和名字(filename)

1.2.3 loader(加载器):用来处理非JS文件,可以将所有文件转换成webpack可以处理的模块,然后交给webpack进行打包等处理;webpack loader 本质上讲是将所有类型的文件转化为应用程序的依赖图可以直接引用的模块,其有两个目标:

1.2.3.1 使用test属性,识别出对应于 loader 的可转换文件

1.2.3.2 使用use属性将这些文件进行转换,使其被添加到依赖图中,并且最终会添加到 bundle 中

如果要在 webpack 配置中定义 loader ,要在 module.rules 中定义,而不是 rules

1.2.4 plugins(插件):从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以处理各种各样的任务

使用一个插件只需要 require() 它,然后把它添加到 plugins 数组中就行。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件,这时需要通过使用 new 操作符来创建它的一个实例。

webpack 提供许多开箱可用的插件!查阅插件列表获取更多信息,更详细的图文请参阅官方文档 https://doc.webpack-china.org/concepts/。

总结

以上所述是小编给大家介绍的Webpack框架核心概念(知识点整理),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木的支持!

Javascript 相关文章推荐
基于javascript实现全国省市二级联动下拉选择菜单
Jan 28 Javascript
Angularjs中UI Router全攻略
Jan 29 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
May 10 Javascript
JSON对象 详解及实例代码
Oct 18 Javascript
Vue.js实战之组件之间的数据传递
Apr 01 Javascript
vue2.0实现分页组件的实例代码
Jun 22 Javascript
微信小程序 密码输入(源码下载)
Jun 27 Javascript
layer插件select选中默认值的方法
Aug 14 Javascript
微信小程序日历弹窗选择器代码实例
May 09 Javascript
vue之组件内监控$store中定义变量的变化详解
Nov 08 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 Javascript
详解webpack+express多页站点开发
Dec 22 #Javascript
如何开发出更好的JavaScript模块
Dec 22 #Javascript
详解webpack提取第三方库的正确姿势
Dec 22 #Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 #Javascript
JavaScript伪数组用法实例分析
Dec 22 #Javascript
JavaScript中Object值合并方法详解
Dec 22 #Javascript
Angular简单验证功能示例
Dec 22 #Javascript
You might like
PHP 数字左侧自动补0
2008/03/31 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
初识ThinkPHP控制器
2016/04/07 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
2010/07/13 Javascript
JavaScript中的getDay()方法使用详解
2015/06/09 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
分享我的jquery实现下拉菜单心的
2015/11/29 Javascript
JavaScript组件开发完整示例
2015/12/15 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
详解vue2 $watch要注意的问题
2017/09/08 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
js中DOM事件绑定分析
2018/03/18 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
解决python3 安装完Pycurl在import pycurl时报错的问题
2018/10/15 Python
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
CSS3实现红包抖动效果
2020/12/23 HTML / CSS
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
印尼旅游网站:via
2017/11/12 全球购物
Order by的几种用法
2013/06/16 面试题
预备党员转正考核材料
2014/06/03 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
法定代表人身份证明书
2014/09/10 职场文书
上班离岗检讨书
2014/09/10 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书
python基础入门之普通操作与函数(三)
2021/06/13 Python
springboot如何初始化执行sql语句
2021/06/22 Java/Android
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers