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

webpack是什么

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

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框架核心概念(知识点整理)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们的支持！

赞 (0)

相关推荐

  • Webpack 实现 Node.js 代码热替换

    这两天为了这个问题, Gitter 上问, Twitter 上问, GitHub 上问, 两天没反应 原来写博客的 jlongster 不理我, 我也不知道 Webpack 作者的联系方式 最后在 Gitter 上发的消息他似乎看到了, 就粗略地解释了一遍, 醍醐灌顶啊... https://github.com/webpack/docs/issues/45#issuecomment-149793458 Here is the process in short: Compile the serv

  • webpack+vue.js快速入门教程

    前言 vuejs--轻量.学习成本低.双向绑定.无dom的操作.组件的形式编写 vuejs是个轻量级的mvvm框架, 集合了angular的基本功能,却又比angular更为精简,功能上涵盖了双向绑定.指令.逻辑控制.过滤器.事件监听.函数等.框架的特点使得项目 在状态变更.分页的场景下可以拥有很大的便利--所有的操作只需要变更数组,没有任何的dom操作. webpack--CommonJS的引用和编写方式.loader非常的丰富,包括vue-loader.css-loader.less-loa

  • Vue.js中用webpack合并打包多个组件并实现按需加载

    Vue.js中用webpack合并打包多个组件并实现按需加载

    前言 随着移动设备的升级.网络速度的提高,用户对于web应用的要求越来越高,web应用要提供的功能越来越.功能的增加导致的最直观的后果就是资源文件越来越大.为了维护越来越庞大的客户端代码,提出了模块化的概念来组织代码.webpack作为一种模块化打包工具,随着react的流行也越来越流行. 使用 Vue 开发项目时,如果要使用其单文件组件特性,必然要使用 webpack 或者 browserify 进行打包,对于大型应用,为了提升加载速度,可以使用 webpack 的 code split 功能

  • Webpack 实现 AngularJS 的延迟加载

    随着你的单页应用扩大,其下载时间也越来越长.这对提高用户体验不会有好处(提示:但用户体验正是我们开发单页应用的原因).更多的代码意味着更大的文件,直到代码压缩已经不能满足你的需求,你唯一能为你的用户做的就是不要再让他一次性下载整个应用.这时,延迟加载就派上用场了.不同于一次性下载所有文件,而是让用户只下载他现在需要的文件. 所以.如何让你的应用程序实现延迟加载?它基本上是分成两件事情.把你的模块拆分成小块,并实施一些机制,允许按需加载这些块.听起来似乎有很多工作量,不是吗?如果你使用 Webpa

  • webpack+vue.js实现组件化详解

    简介 在vue中实现组件化用到了vue特有的文件格式.vue,在每一个.vue文件就是一个组件,在组件中我们将html,css,js全部写入,然后在webpack中配置vue-loader就可以了. 建立vue组件 在src目录下建立components文件夹,并在其中建立app.vue文件,这样我们项目的目录结构如下: |--dist //webpack打包后生成的文件夹 | |--build.js |--node_modules //项目的依赖所在的文件夹 |--src //文件入口 | |

  • 基于vuejs+webpack的日期选择插件

    基于vuejs+webpack的日期选择插件

    基于vuejs+webpack环境使用的日期选择插件,希望大家喜欢. 支持单选和多选日期 支持限定开始和结束日期范围选择. 支持小时分钟 需要引入fontawesome.io 的图标库. Options :show 是否显示 :type date|datetime :value 默认值 :begin 可选开始时间 :end 可选结束时间 :x 显示x坐标 :y 显示y坐标 :range 是否多选 test.vue <template> <input type="text&quo

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

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

    webpack是什么 webpack是一个前端构建的打包工具(并不是什么库或框架), 它能把各种资源,例如JS(含JSX).coffee.css(含less/sass).图片等都作为模块来处理和使用. 1.基础知识点 1.1 webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个

  • Hibernate中5个核心接口知识点整理

    Hibernate是一个全自动的orm框架,hibernate可以自动生成SQL语句,自动执行,使得Java程序员可以随心所欲的使用对象编程思维来操纵数据库,同时Hibernate作为持久层中间件,它的具体实现对与上层调用是透明的,即上层通过接口来调用Hibernate的具体实现,所以对于入门级别的讨论来说,自然应该先从接口开始了. 1.Configuration核心接口 在Hibernate应用中通过Configuration的实例来指定对象-关系映射文件或通过Configuration动态配

  • Spring框架核心概念小结

    Spring框架核心概念小结

    目录 1.Spring是什么? 2.Spring框架的优点是什么 3.什么是Spring Bean? Spring bean的不同作用域: 4.Spring IoC 容器 有两种不同类型的容器: ApplicationContext 容器: 5.@Autowired 1)基于构造器和setter的区别 2)context:annotation-config 和 context:component-scan 的区别 3)@Component.@Controller.@Repository & @S

  • Laravel框架基础语法与知识点整理【模板变量、输出、include引入子视图等】

    Laravel框架基础语法与知识点整理【模板变量、输出、include引入子视图等】

    本文实例讲述了Laravel框架基础语法与知识点整理.分享给大家供大家参考,具体如下: 这篇文章的知识点主要有以下几个点: 模板中输出PHP变量 模板中调用PHP代码 原样输出 模板注释 引入子视图 知识点一:模板中输出PHP变量 首先我们要有一个变量,这个变量我们将他存储于控制器当中. 如下: $name = 'Rarin'; 当然,这个变量肯定要和输出视图放置在一个方法里,然后,我们在Bstp.blade.php(Bstp目录下的)填入 {{$name}} 代码.效果如下: 知识点二:模板中

  • 数据库索引的知识点整理小结,你所需要了解的都在这儿了

    数据库索引,相信大家都不陌生吧. 索引是对数据库表中一列或多列的值进行排序的一种结构,使用索引可快速访问数据库表中的特定信息.作为辅助查询的工具,合理的设计索引能很大程度上减轻db的查询压力,db我们都知道,是项目最核心也是最薄弱的地方,如果压力太大很容易产生故障,造成难以预计的影响.所以,不管是日常开发还是面试,索引这一块知识体系都是必须掌握的. 当然,虽说是必须掌握,但索引的知识点很多,很多初学者经常会遗漏,这也是我为什么想写这篇知识点总结的原因,既是给读者的分享,也是给自己一次全面的复习,

  • java中Hibernate面试知识点整理

    作为常用的框架之一,Hibernate在面试的时候难免会被问到.好在涉及的都是一些理论方面的知识点,比如概念.原理.使用之类的.我们在面试之前可以针对这方面的题目,做一个充足的准备,即使有些人对hibernate框架的了解并不深入.下面我们就hibernate框架中常见的面试题带来介绍. 1. 为什么要使用 hibernate? (1).对JDBC做了轻量级的封装,简化了数据访问层编码. (2).Hibernate是一个ORM框架,开发者可以使用面向对象的思想操作数据库,使用更加方便. (3)

  • pytorch之深度神经网络概念全面整理

    pytorch之深度神经网络概念全面整理

    目录 1.神经网络训练过程 2.基础概念 2.1数学知识 2.1.1导数 2.1.2 梯度 2.2前向传播和反向传播 3.数据预处理手段 3.1 归一化  (normalization) 3.2 标准化(Standardization) 3.3 正则化 3.4 独热码编码(one hot) 4.数据处理库 4.1 numpy 4.2 pandas 4.3 matplotlib 5.训练集.测试集,测试集 6.损失函数 7.优化器 8.激活函数 9.hello world 10.总结 推荐阅读 点

  • Vue面试题及Vue知识点整理

    看面试题,只是为了查漏补缺,看看自己那些方面还不懂.切记不要以为背了面试题,就万事大吉了,最好是理解背后的原理,这样面试的时候才能侃侃而谈.不然,稍微有水平的面试官一看就能看出,是否有真才实学还是刚好背中了这道面试题.(都是一些基础的vue面试题,大神不用浪费时间往下看) 一.对于MVVM的理解? MVVM 是 Model-View-ViewModel 的缩写.Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑.View 代表UI 组件,它负责将数据模型转化成UI 展现出来

  • ES6知识点整理之Proxy的应用实例详解

    本文实例讲述了ES6知识点整理之Proxy的应用.分享给大家供大家参考,具体如下: Proxy 用于修改对象某些操作的默认行为,可以对外界的访问进行过滤和改写,其概念类似于元编程. Proxy 让我们可以对任何对象的绝大部分行为进行监听和干涉,实现更多的自定义程序行为.在目标对象之前架设一层"拦截",外界对该对象的访问,都必须先通过这层拦截. 目前[兼容性]存在一定的问题,目前在chrome和ff浏览器中的非严格模式下可用,一些先进的技术即使在目前不能广泛应用,但随着时间的流逝,都将会

  • vue组件三大核心概念图文详解

    前言 本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽略的一些重要细节.如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 本文的代码请猛戳 github博客 ,纸上得来终觉浅,大家动手多敲敲代码! 一.属性 1.自定义属性props prop 定义了这个组件有哪些可配置的属性,组件的核心功能也都是它来确定的.写通用组件时,props 最好用对象的写法,这样可以针对每个属性设置类型.默认值或自定义校验属性的值,这点在组件开发中很重要,

随机推荐