2021年3月1日

webpack4.X之tapable实例对象AsyncParallelHook源码

摘要:模拟手写AsyncParallelHook源码部分。 let Hook = require('./Hook.js') class HookCodeFactory { args({ after, before } = {}) { let allArgs = this.options.args if ( 阅读全文

posted @ 2021-03-01 23:36 メSerendipity 阅读(6) 评论(0) 推荐(0) 编辑

2021年2月27日

webpack4.X之tapable实例对象SyncHook源码

摘要:模拟手写SyncHook源码 const SyncHook=require('./SyncHook.js') let hook=new SyncHook(["name","age"]) hook.tap('fn1',function(name,age){ console.log('fn1 >',na 阅读全文

posted @ 2021-02-27 22:35 メSerendipity 阅读(3) 评论(0) 推荐(0) 编辑

2021年2月22日

webpack4.X核心工具库之tapable实例对象Hook

摘要:一.tapable简介 tapable为webpack底层的核心工具库,webpack许多功能的实现都是跟它密不可分的,webpack的编译流程为配置初始化 >内容编译 >输出编译后内容,这三个的整体执行过程可以称之为 事件驱动型事件流工作机制,这个机制将不同的工作流串联起来完成所有的工作,其中最为 阅读全文

posted @ 2021-02-22 17:42 メSerendipity 阅读(84) 评论(0) 推荐(1) 编辑

2021年2月20日

webpack4.X源码解析之懒加载

摘要:本文针对Webpack懒加载构建和加载的原理,对构建后的源码进行分析。 一.准备工作 首先,init之后创建一个简单的webpack基本的配置,在src目录下创建两个js文件(一个主入口文件和一个非主入口文件)和一个html文件,package.json,webpack.config.js公共部分代 阅读全文

posted @ 2021-02-20 17:24 メSerendipity 阅读(38) 评论(0) 推荐(1) 编辑

2021年2月17日

webpack4.X源码解析之esModule打包分析

摘要:入口文件index.js采用esModule方式导入模块文件,非入口文件index1.js分别采用CommonJS和esmodule规范进行导出。 首先,init之后创建一个简单的webpack基本的配置,在src目录下创建两个js文件(一个主入口文件和一个非主入口文件)和一个html文件,pack 阅读全文

posted @ 2021-02-17 20:49 メSerendipity 阅读(56) 评论(0) 推荐(0) 编辑

2021年2月16日

webpack4.X源码解析之CommonJS打包分析

摘要:入口文件index.js采用CommonJS方式导入模块文件,非入口文件index1.js分别采用CommonJS和esmodule规范进行导出。 首先,init之后创建一个简单的webpack基本的配置,在src目录下创建两个js文件(一个主入口文件和一个非主入口文件)和一个html文件,pack 阅读全文

posted @ 2021-02-16 16:51 メSerendipity 阅读(122) 评论(0) 推荐(1) 编辑

2021年2月14日

浅谈WEB前端规范化标准之ESlint

摘要:规范化标准 软件开发需要多人开发,不同的开发者具有不同的编码习惯和喜好,不同的喜好增加项目的维护成本,所以需要明确统一的标准,决定 了项目的可维护性,人为的约定不可靠,所以需要专门的工具进行约束,并且可以配合自动化工具进行检查,这种专门的工具称为lint, 前端接触最多的是ESLint,下面我们看下 阅读全文

posted @ 2021-02-14 21:39 メSerendipity 阅读(162) 评论(0) 推荐(2) 编辑

2021年2月9日

浅谈Webpack模块打包工具四

摘要:Webpack 生产环境优化 生产环境和开发环境有很大的差异,生产环境只注重运行效率,开发环境主要开发效率,webpack4.0开始提出了(mode)模式的概念 针对不同的环境进行不同的配置,为不同的工作环境创建不同的配置。 Webpack不同环境下的不同配置,主要有两种形式: 1.配置文件根据环境 阅读全文

posted @ 2021-02-09 22:12 メSerendipity 阅读(111) 评论(0) 推荐(0) 编辑

2021年2月8日

浅谈Webpack模块打包工具三

摘要:Source Map 生产代码与开发代码完全不同,如果需要调试应用的话会非常的麻烦,错误信息无法定位,Soutce Map就会逆向得到源代码, 须在打包之后的代码文件的末尾位置例如添加//# sourceMappingURL=jquery-3.4.1.min.map字段即开启sourceMap我们就 阅读全文

posted @ 2021-02-08 21:48 メSerendipity 阅读(127) 评论(0) 推荐(0) 编辑

2021年2月7日

浅谈Webpack模块打包工具二

摘要:Webpack插件机制介绍 Loader专注实现资源模块加载,plugin解决其他自动化工作,比如清除dist目录,拷贝静态文件值输出目录,压缩输出代码等,下面列举几个plugin 的例子。 Webpack自动清除目录插件 Webpack常用插件clean-webpack-plugin 自动清除目录 阅读全文

posted @ 2021-02-07 22:58 メSerendipity 阅读(102) 评论(1) 推荐(0) 编辑

导航