webpack
webpack相关
leelxp
前端码农,算法差。。。
展开
-
webpack构建之webpack的构建流程是什么
webpack是一个打包模块化javascript的工具,它将一切文件都看作是模块。通过loader编译转换文件,通过plugin注入钩子,最后输出的资源模块组合成文件。它的主要配置有entry,output,modules,plugins,loader.基本概念:1、compiler:webpack的运行入口,实例化时定义webpack构建主要流程,同时创建时使用的核心对象compilation;2、compilation:由compiler实例化,存储构建过程中使用的数据,用户监控这些数据的原创 2020-09-07 14:55:28 · 1360 阅读 · 0 评论 -
前端工程化:CommonJS、AMD、CMD、UMD和ES Modules的区别
前端工程化思想一直以来都是一个非常热议的话题,其实前端工程化从技术方面来说,无非就是这么几点:CommonJS、AMD、CMD、UMD和ES6 Modules,那么我们就来说说前端这几个模块。1、CommonJS说到CommonJS,那就的从他的出发点说起了,commonjs的出发点是js没有完善的模块系统。标准库较少,缺少包管理工具,而在node.js兴起之后。能让js在任何地方运行,特别是服务端,也能具备开发大型项目的能力,所以commonjs也就应用而生了。node.js是commonjs的最原创 2020-08-19 19:00:38 · 5146 阅读 · 0 评论 -
webpack构建之tree-shaking的原理是什么
我们在开发一个项目的时候,总会遇到这样的问题,就是比如我们写了一个utils工具类,我们在某一个组件内要用到utils这个类里的其中一个或者某几个方法,但是当我们引入utils的时候,实际是将utils里的方法全都引入了,这样就会导致将没有必要的东西也引入,包提就会越来越大。那么我们如何解决这个问题呢?是的,tree-shaking.看名字就知道是将哪些没有用的东西都shaking掉。Tree-shaking是一种通过清楚多余代码的方式来优化项目打包体积的技术。tree-shaking原理利用es6原创 2020-08-20 17:53:03 · 5261 阅读 · 0 评论 -
webpack构建之loader与plugin的区别是什么
在webpack中,loader和plugin是俩个关键的部分,常常被面试官拿来比较他们,那么他们到底有什么区别呢?loaderloader是文件加载器,能够加载资源文件,并对这些文件进行统一处理,诸如编译、压缩等,最终一起打包到指定的文件中。处理一个文件可以使用多个loader,loader的执行顺序和配置中的顺序正好相反,也就是说最后一个loader最先执行,第一个loader最后执行。第一个执行的loader的返回值接收源文件内容作为参数,其他loader接收前一个执行的loader的返回值作原创 2020-08-24 11:22:04 · 2526 阅读 · 0 评论 -
webpack构建之webpack打包流程到底是什么
webpack的运行流程是一个串行的过程,从启动到结束会依次执行以下流程:首先会从配置文件和Shell语句中读取与合并参数,并初始化需要使用的插件和配置插件等执行环境所需要的参数;初始化完成后会调用Compiler的run来真正启动webpack编译构建过程,webpack的构建流程包括compile、make、build、seal、emit阶段,执行完这些阶段就完成了构建过程。原创 2020-08-13 15:19:13 · 10283 阅读 · 1 评论