摘要：一.complier方法的实现 complier贯穿整个打包的流程，具体执行顺序如下: 1.newCompilationParams 方法调用,返回 params,normalModuleFactory 2.上述的操作是为了获取parms 3.接着调用了 beforeCompile 钩子监听,在它的
阅读全文
摘要：EntryOptionPlugin为Webpack挂载内置插件入口的核心代码,EntryOptionPlugin会解析传给 webpack 的配置中的 entry 属性 lib下新建WebpackOptionsApply.js,EntryOptionPlugin.js,SingleEntryPlug
阅读全文
摘要：一.webpack打包流程如下图所示： 二.项目的具体目录结构如下： 1.在根目录下创建run.js，代码如下： //webpack核心代码 引入webpack模块 let webpack = require('webpack') //获取webpack.config的信息 let options
阅读全文
摘要：模拟手写AsyncParallelHook源码部分。 let Hook = require('./Hook.js') class HookCodeFactory { args({ after, before } = {}) { let allArgs = this.options.args if (
阅读全文
摘要：模拟手写SyncHook源码 const SyncHook=require('./SyncHook.js') let hook=new SyncHook(["name","age"]) hook.tap('fn1',function(name,age){ console.log('fn1 >',na
阅读全文
摘要：一.tapable简介 tapable为webpack底层的核心工具库，webpack许多功能的实现都是跟它密不可分的,webpack的编译流程为配置初始化 >内容编译 >输出编译后内容，这三个的整体执行过程可以称之为 事件驱动型事件流工作机制，这个机制将不同的工作流串联起来完成所有的工作，其中最为
阅读全文
摘要：本文针对Webpack懒加载构建和加载的原理，对构建后的源码进行分析。 一.准备工作 首先,init之后创建一个简单的webpack基本的配置,在src目录下创建两个js文件（一个主入口文件和一个非主入口文件）和一个html文件,package.json，webpack.config.js公共部分代
阅读全文
摘要：入口文件index.js采用esModule方式导入模块文件，非入口文件index1.js分别采用CommonJS和esmodule规范进行导出。 首先,init之后创建一个简单的webpack基本的配置,在src目录下创建两个js文件（一个主入口文件和一个非主入口文件）和一个html文件,pack
阅读全文
摘要：入口文件index.js采用CommonJS方式导入模块文件，非入口文件index1.js分别采用CommonJS和esmodule规范进行导出。 首先,init之后创建一个简单的webpack基本的配置,在src目录下创建两个js文件（一个主入口文件和一个非主入口文件）和一个html文件,pack
阅读全文
摘要：规范化标准 软件开发需要多人开发,不同的开发者具有不同的编码习惯和喜好,不同的喜好增加项目的维护成本，所以需要明确统一的标准,决定 了项目的可维护性,人为的约定不可靠,所以需要专门的工具进行约束，并且可以配合自动化工具进行检查，这种专门的工具称为lint, 前端接触最多的是ESLint，下面我们看下
阅读全文
