前端工程化# webpack
文章平均质量分 80
webpack打包工具
mxydl2009
这个作者很懒,什么都没留下…
展开
-
简易的打包器--webpack打包原理
手写一个简单的类似webpack的打包器打包流程说明:定义依赖分析函数,通过读取文件内容,分析得到该文件导入的依赖项code => AST => 得到导入声明,记录导入声明中的依赖项路径 => AST->code => 返回记录当前文件filename、依赖项dependencies和转译后的code的对象定义分析依赖图列表的函数,传入项目的入口文件,递归调用依赖分析函数,得到所有文件的依赖关系图列表,返回该列表。核心在于如何递归调用依赖分析函数,这里使用广原创 2021-02-23 20:39:53 · 301 阅读 · 2 评论 -
webpack的tree-shaking
先来看tree-shaking的几种使用情况情况一// ./common/util.jsimport lodash from 'lodash-es';var func1 = function(v) { alert('111');}var func2 = function(v) { return v;};export { func1, func2}// ./index.jsimport { func2 } from '../common/util';var a原创 2020-08-03 21:05:22 · 466 阅读 · 0 评论 -
JavaScript打包之Webpack
打包:从开发到生产解决ES Module的浏览器兼容问题,编译ES6+到ES5解决模块请求频繁的问题,模块打包成一个文件资源都需要模块化,管理所有资源的依赖关系,便于业务代码与相关资源的统一维护打包工具作用:使用模块化为开发环境提供便利,使用打包为生产环境提供效率。Webpack:打包所有资源webpack的执行是node环境,因此相对路径必须要用./开头,不能省略。配置文件webpack会运行配置文件,拿到配置文件导出的配置对象,有多种导出配置对象的方式直接导出配置对象modul原创 2020-07-13 22:48:23 · 843 阅读 · 0 评论