webpack源码
12篇文章 · 0订阅
  • 搞懂webpack热更新原理
    HMR即Hot Module Replacement是指当你对代码修改并保存后，webpack将会对代码进行重新打包，并将改动的模块发送到浏览器端，浏览器用新的模块替换掉旧的模块，去实现局部更新页面而非整体刷新页面。接下来将从使用到实现一版简易功能带领大家深入浅出HMR。 如上…
    Webpack
  • 聊聊 webpack 异步加载（三）：webpack 如何做到持久化缓存
    前两篇文章我们基本清楚了在两种不同情况下，webpack如何处理拆包后的代码：1、库代码与业务代码分离2、import()与codespliting默认情况下chunks与modules都以顺序的数字
    Webpack
  • 聊聊 webpack 异步加载（二）：webpack 如何处理 import()
    上篇文章解释了webpack是怎么加载拆包后的代码的，这篇文章解释下webpack如何处理import()。import()包含的代码被webpack当作chunk处理，同样也是通过window["w
    Webpack
  • 聊聊 webpack 异步加载（一）：webpack 如何加载拆包后的代码
    前端代码在使用​webpack​进行打包时，经常会做两种优化：把稳定的库代码（如​react​、​antd​等）与业务代码分离，业务代码的更改不影响用户本地的库代码缓存，同时也把一个大文件拆分成多个文
    Webpack
  • webpack 4 源码主流程分析（三）：编译前的准备
    该类主要对文件系统做了一些封装，包括输入，输出，缓存，监听等等，这些扩展后的方法全部挂载在 compiler 对象下。 在这里，会把 compiler 实例传进去供 plugin 使用，compiler 包含整个构建流程的全部钩子，通过它可以把控整个 webpack 构建周期。…
    Webpack
  • webpack 4 源码主流程分析（七）：构建 module（下）
    runLoaders 运行结束后，回调里得到经 loader 编译后的模块代码字符串 result 和对应的 resourceBuffer。 在回调里执行了 createSource 后，判断 loader 的 result 是否有第三个参数对象并且里面存在 webpackAS…
    Webpack
  • webpack 4 源码主流程分析（八）：生成 chunk
    执行 compilation.finish，触发 compilation.hooks：finishModules，执行插件 FlagDependencyExportsPlugin 注册的事件，作用是遍历所有 module 将 export 出来的变量以数组的形式，单独存储到 m…
    Webpack
  • webpack 4 源码主流程分析（六）：构建 module（上）
    这里触发 normalModuleFactory.hooks:createModule，如果钩子里没有项目配置的自定义 module，则使用 webpack 生成的 module。 得到 module 实例，接着触发 normalModuleFactory.hooks:modu…
    Webpack
  • webpack 4 源码主流程分析（四）：reslove 前的准备
    在方法中先触发 compiler.hooks: beforeRun，执行之前注册的 NodeEnvironmentPlugin（该插件此时判断 inputFileSystem 是否被配置，如未配置则执行 purge 清理方法），然后在回调里触发 compiler.hooks: …
    Webpack
  • Webpack 核心模块 tapable 解析(各个Hook详解)
    Webpack 是一个现代 JavaScript 应用程序的静态模块打包器，是对前端项目实现自动化和优化必不可少的工具，Webpack 的 loader（加载器）和 plugin（插件）是由 Webpack 开发者和社区开发者共同贡献的，而目前又没有比较系统的开发文档，想写加载…
    Webpack