webpack底层原理和使用方法

文章目录

    • 1. webpack的定义
    • 2. webpack的背景
    • 3. webpack的核心思想
    • 3. webpack的作用
    • 4. webpack的优势
    • 5. webpack的劣势
    • 6. 对比其他打包工具
    • 7. webpack的浏览器兼容性
    • 8. webpack的运行环境
    • 9. webpack的打包过程
    • 9.1 初始化参数阶段
      • 9.1.1 配置参数
      • 9.1.2 实例化插件
      • 9.1.3 实例化编译对象
      • 9.1.4 加载插件
      • 9.1.5 entry-option
      • 9.1.6 after-resolvers阶段
    • 9.2 模块编译阶段
      • 9.2.1 编译模块
      • 9.2.2 创建Chunk
    • 9.3 输出资源阶段
      • 9.3.1 输出资源
      • 9.3.2 确定输出路径和文件名
    • 10. webpack的运行流程
      • 10.1 运行流程和打包流程的比较
    • 10. 合并参数
      • 10.1 配置文件(webpack.config.js)
      • 10.2 Shell语句(命令行参数)
      • 10.3 合并参数
      • 10.4 注意点
      • 10.5 底层源码
    • 11. compiler对象
    • 12. Webpack生命周期
    • 13. entry-option
    • 14. tree-shaking
    • 15. 构建依赖图
    • 16. HMR
    • 17. 模式
    • 18. 资源优化
    • 19. 模块解析规则
    • 20. 插件系统
    • 21. 配置选项
    • 22. 总结

1. webpack的定义

Webpack是一个用于现代JavaScript应用程序的静态模块打包工具。

webpack底层原理和使用方法_第1张图片

这里的“静态模块”指的是在开发阶段可以直接被Webpack引用的资源,这些资源可以直接被获取并打包进最终的输出文件(如bundle.js)。
静态模块可以包括JavaScript代码、CSS样式表、图片和其他类型的文件。

2. webpack的背景

Webpack的背景主要源于前端开发复杂度的提升和模块化规范的演变。

随着互联网的发展,前端项目变得越来越复杂,模块之间的关系难以梳理,耦合程度较高,导致代码难以维护。

Webpack应运而生,它可以打包所有依赖的资源,将它们打包成一个或多个js文件,有效降低文件请求次数,提升性能。

此外,Webpack的出现也与模块化规范的演变密切相关。

在早期制定前端模块化标准时,并没有直接选择CommonJS规范(CommonJS约定的是以同步的方式加载模块),而是专门为浏览器端重新设计了一个规范,叫做AMD(Asynchronous Module Definition)规范,即异步模块定义规范。

同期还推出了一个非常出名的库,叫做Require.js,它除了实现了AMD模块化规范,本身也是一个非常强大的模块加载器。

模块化规范:

前端开发在过去几年中经历了巨大的变革,项目的复杂度和规模不断增加。
随着代码量的增长,维护和理解代码变得更加困难,这促使了前端社区对模块化的强烈需求。
模块化可以帮助开发者将代码拆分成独立的、可重用的部分,每个部分都有自己的职责和接口,从而提高了代码的可维护性和可重用性。

模块化规范其中一些重要的规范:

  1. 文件划分方式:这是模块化最原始的方式,开发者简单地将代码拆分成多个文件,然后在需要时通过

你可能感兴趣的:(webpack,前端,node.js,前端框架)