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 相关文章推荐
JS BASE64编码 window.atob(), window.btoa()
Mar 09 Javascript
cloudgamer出品ImageZoom 图片放大效果
Apr 01 Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 Javascript
JavaScript中的异常捕捉介绍
Dec 31 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
Feb 05 Javascript
javascript 操作cookies详解及实例
Feb 22 Javascript
微信小程序tabbar不显示解决办法
Jun 08 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
详解在React项目中安装并使用Less(用法总结)
Mar 18 Javascript
vue实现记事本功能
Jun 26 Javascript
非常漂亮的js烟花效果
Mar 10 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中数字检测is_numeric与ctype_digit的区别介绍
2012/10/04 PHP
PHP数据类型之布尔型的介绍
2013/04/28 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
ucenter中词语过滤原理分析
2016/07/13 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
JS获得选取checkbox整行数据的方法
2015/01/28 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
javascript弹出拖动窗口
2015/08/11 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
javascript实现base64 md5 sha1 密码加密
2015/09/09 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python yield使用方法示例
2013/12/04 Python
Python自动化开发学习之三级菜单制作
2017/07/14 Python
python实时监控cpu小工具
2018/06/21 Python
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
pytorch 求网络模型参数实例
2019/12/30 Python
小结Python的反射机制
2020/09/28 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
医学院校毕业生自荐信范文
2014/01/01 职场文书
温馨提示标语
2014/06/26 职场文书
公证委托书格式
2014/09/13 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
新党员入党决心书
2015/09/22 职场文书
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android