标签: webpack

webpack-dev-server 一些设计点

整体流程webpack-dev-server 通过 express 构建服务,以下是它的整体流程: validateOptions:使用 schema-utils 校验配置选项。 normalizeOptions:处理选项,混入默认配置。 updateCompiler:酌情为 webpack 添加 HotModuleReplacementPlugin 插件,socket 通信客户端脚本。 将选项

webpack加载器编程

原理loader 是导出为函数的 js 模块,它支持同步模式、异步模式。同步模式有两种编程方式,其一使用 return 返回结果作为下一个加载器的资源,其二使用 this.callback 传入结果。异步模式使用 this.async 开启,在 this.async 执行过程中再调用 this.callback 语句,以启用下一个加载器的执行逻辑。官方推荐使用异步模式,这样可以提升 webpack

webpack动态导入

代码分割webpack 官方文档 动态导入 部分已指示我们,可使用 es 提案中的 import() 或 webpack 提供的 require.ensure 语法懒加载代码。我们按下 require.ensure 不表,只介绍 import()。webpack 官方所提供的示例如下: 1234567891011async function getComponent() { var e

umi中的插件和路由机制

上图是 umi 的架构图,本文聚焦于解读 umi 的插件和路由机制。umi 中的插件机制支撑了插拔式命令、嵌套插件、运行时插件、文件生成器、生命周期钩子系统等功能;路由机制用于将 src/pages 解析为路由信息,又支持配置路由、运行时动态扩展。插件和路由机制的核心源代码都由 umi-build-dev 包提供。文中所给代码均经过一定程度的删减,只保留核心代码部分。 af-webpack同大多

webpack插件编程

babel-preset-umibabel-preset-umi 是 umi 中的一个模块。 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081

前端构建工具 dawn 不完全解密

实现原理dawn 是一个采用中间件技术实现的轻量的任务流协调器,它和 gulp, grunt 有异曲同工之妙。dawn 本身并不处理任务,转而交由中间件承担这一职能,如同 gulp, grunt 插件。在实现上,dawn 是 webpack 出台后的产物,就不需要像 gulp, grunt 那样关注任务流的始点 —— 文件位置,而更容易聚焦于任务的分解,将编译、压缩作业交给 dn-middlewa

webpack插件指南

HotModuleReplacementPlugin内置为 webpack.HotModuleReplacementPlugin,热替换插件。 12345new webpack.HotModuleReplacementPlugin({ multiStep: boolean,// 设置为 true 时,插件会分成两步构建文件。首先编译热加载 chunks,之后再编译剩余的通常的资源 f

webpack加载器指南

加载器在 webpack 编译前预处理文件,链式调用多个加载器。 babel-loaderbabel-loader将 es6 降级为 es5。 参考文档: Babel是如何编译JS代码的及理解抽象语法树(AST) options 选项参考文档: babel options。 12345678910111213141516171819202122232425262728293031323334353

浅析webpack-merge源码

merge方法webpack-merge 类库的 merge 方法基于 lodash 类库的 mergeWith 方法实现。 mergeWith 方法用于遍历数组项或对象属性,通过尾参 customizer 定制化数据处理函数,获得新的数组项或对象属性。customizer 函数的参数为 (objValue, srcValue, key, object, source, stack)。 webpa

webpack配置指南

3.10.0参考文档:webpack 3.10.0 官方文档webpack 3.5.5 中文文档 content 上下文配置用于定位入口文件、loader的绝对路径,默认为工程目录。在基于webpack开发的打包工具中,content属性可设置为该类库的目录路径,以便于查找该类库加载的loader,入口文件采用绝对路径的方式引入。 context: path.resolve(__dirname,