美文网首页
webpack初学概念

webpack初学概念

作者: 淡蓝天风 | 来源:发表于2019-10-29 19:00 被阅读0次

    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初学概念

          本文链接:https://www.haomeiwen.com/subject/cxewvctx.html