zoukankan      html  css  js  c++  java
  • webpack打包

    webpack是一个插件架构,所有功能都以插件的形式集成在构建流程中,并通过发布订阅事件来触发各个插件的执行。

    核心类是Tapable,用它来实现插件的实例化及挂载。

    optimist是node的工具库,根据webpack.config.js及shell options生成option,options包含构建需要的重要信息;(entry-options)

    webpack创建compiler实例,如果options是数组,则创建多个compiler(compiler包含compiler与watching两个对象),

    初始化compiler,为compiler添加上下文context和options,初始化基本插件,把options对应的选项进行require;

    compiler调用run,run内调用compile方法,开始编译;(make)

    compiler内创建compilation对象,并将this传入,compilation就包含了对compiler的引用;

    compiler调用addEntry,addEntry调用_addModuleChain();

    _addModuleChain查询合适的工厂函数创建模板,并将其加入module链当中,调用buildModule(),对模块进行build(build-module);

    buildModule是核心,包括**module.js内调用的build(),build调用doBuild来查找合适的loader,并在回调函数内解析源文件,生成AST,来记录源码间的依赖行为,创建depedency加入依赖数组(期间调用addModuleDepedencies);

    module创建完毕;

    compilation调用seal(after-compile),添加hash,调用addModule、addChunk(将module装入chunk)对chunk和module开始封装、合并、抽取公共模块,生成编译后的源码

    compilation调用createChunkAsset,开始生成最终代码;

    createChunkAsset内根据不同的module,调用MainModule.render,chunkTemplate.render进行进一步处理

    MainModule.render,chunkTemplate.render内调用moduleTemplate.render

    最终生成_webpack_require格式。

    moduleTemplate.render调用module.source

    module.source将生成好的代码放入compilation.assets中

    Compiler.emitAssets将compilation的assets输出到目录中

    webpack的template有四种子类

    MainTemplate.js 生成项目入口文件

    ChunkTemplate.js 异步加载的js

    ModuleTemplate.js 对所有模块的一个代码生成

    HotUpdateChunkTemplate.js 对热替换的处理

    依赖(dependency)

    每一个module都有dependencies字段,这是它的依赖数组,而每一个依赖对象都有一个module字段,指向被依赖的module,这样module就能找到它依赖的那些module。dependency有许多子类,如AMDRequireDependency、CommonJsRequireDependency、SystemImportDependency等,分别对应AMD、commonJs、es6等的加载规范。

  • 相关阅读:
    Android模拟器访问本地的localhost失败及解决方案
    CSS3 @font-face使用实例
    Web字体库下载及转换工具
    Web中常用字体介绍(转)
    CSS3 @font-face详细用法(转)
    HTML5 Canvas Text文本居中实例
    HTML5 Canvas Text实例1
    Html5 Canvas Text
    Wpf Hyperlink超链接控件使用
    MVC使用Exception过滤器自定义处理Action的的异常
  • 原文地址:https://www.cnblogs.com/yanze/p/7999550.html
Copyright © 2011-2022 走看看