美文网首页
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初学概念

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

  • webpack初学者系列三:webpack核心概念

    webback 核心概念 image.png entry webpack always needs an entr...

  • 初学Webpack

    刚开始做微信小程序开发,偶然间看到webpack这个东西,似乎前端开发中会经常用到,花点时间小小的学习了一下。 最...

  • 初学webpack

    1.使用命令行打开cmd 先安装node,查看版本,过低的请升级 2.官方建议不要全局安装,自己PC安装了webp...

  • 2-2、学习准备

    一、安装webpack 二、查看webpack是否安装成功 三、webpack简介 概念 本质上,webpack ...

  • webpack学习笔记

    安装 webpack webpack-dev-server webpack-cli 命令行 重要概念 entry ...

  • webpack概念

    概念 webpack是一个现代javascript应用程序的静态模块打包器, webpack处理应用程序时他会递归...

  • webpack概念

    webpack核心概念 Entry: 入口,Webpack 执行构建的第一步将从 Entry 开始。Module:...

  • webpack概念

    webpack是一个JavaScript应用程序的静态模块打包器。当webpack处理应用程序时,它会递归地构建一...

  • webpack概念

    参考 1.module中rules理解 在module中定义的rules中必须包含test,use这个规则的意思是...

网友评论

      本文标题:webpack初学概念

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