webpack初学概念

webpack概念:webpack是现代 JavaScript 应用程序的静态模块打包器

核心概念

    1.entry:一个可执行模块或者库的入口。

    2.chunk:多个文件组成一个代码块。可以将可执行的模块和他所依赖的模块组合成一个chunk,这是打包。

    3.loader:文件转换器。例如把es6转为es5,scss转为css等

    4.plugin:扩展webpack功能的插件。在webpack构建的生命周期节点上加入扩展hook,添加功能。

构建流程(原理) --- 从启动构建到输出结果一系列过程:

    1.初始化参数:解析webpack配置参数,合并shell传入和webpack.config.js文件配置的参数,形成最后的配置结果。

    2.开始编译:上一步得到的参数初始化compiler对象,注册所有配置的插件,插件监听webpack构建生命周期的事件节点,做出相应的反应,执行对象的 run 方法开始执行编译。

    3.确认入口:从配置的entry入口,开始解析文件构建AST语法树,找出依赖,递归下去。

    4.编译模块:递归中根据文件类型和loader配置,调用所有配置的loader对文件进行转换,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理。

    5.完成模块编译并输出:递归完事后,得到每个文件结果,包含每个模块以及他们之间的依赖关系,根据entry配置生成代码块chunk。

    6.输出完成:输出所有的chunk到文件系统。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 深入浅出Webpack学习笔记 基本概念 常用的构建工具 所有的构建工具所做的工做大致一样,都是把源代码翻译转换成...
    IsaacHHH阅读 3,392评论 0 0
  • webpack使用学习 本分享学习借鉴webpack中文官网,官网链接(中文文档):https://www.web...
    腿毛怪丶叔叔阅读 4,361评论 0 5
  • 目录第1章 webpack简介 11.1 webpack是什么? 11.2 官网地址 21.3 为什么使用 web...
    lemonzoey阅读 5,683评论 0 1
  • 入门介绍 为什么选择webpack 大多数团队在开发新项目时会采用紧跟时代的技术,这些技术几乎都会采用“ 模块化+...
    一米阳光kk阅读 6,837评论 0 9
  • 我们总会有那么一刻突然明了怀念仅仅是怀念罢了,再怎么也不会再重回我们的生活的。 就像我的雪说的“离别果然是要迅速果...
    懵大熊阅读 2,900评论 2 5