1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Document</title>
  7. </head>
  8. <body>
  9.   <script type="module" src="src/index.js"></script>
  10. </body>
  11. </html>
  14. <!--type="module"  对于这种用法是ES Modules 中提出来的标准
  15.                                     用来区分加载是一个普通JS脚本还是一个模块-->
npm init -y
npm i webpack webpack-cli -D

##webpack是Webpack的核心模块
##webpack-cli是Webpack的cli程序，用来在命令地中调用 webapck

npx webpack -v
webpack 5.16.0
webpack-cli 4.4.0

npx是npm 5.2以后新增的一个命令，可以更方便的执行远程模块或项目node_modules中的CLI程序

插件最常见的应用场景

  • 实现自动在打包之前清除dist目录（上次的打包结果）
    • clean-webpack-plugin
  • 自动生成应用所需要的HTML文件
    • html-webpack-plugin
  • 根据不同环境为代码注入类似API地址这种可能变化的部分
  • 拷贝不需要参与打包的资源文件到输出目录
    • copy-webpack-plugin
  • 压缩Webpack打包完成后输出的文件
  • 自动发布打包结果到服务器实现自动部署

开发一个插件

emit这个钩子会在Webpack即将向输出目录输出文件时执行
通过compiler对象的hooks属性访问到emit钩子，再通过tap方法注册一个钩子函数，
这个方法接收两个参数：

  • 第一个插件的名称
  • 要挂载到这个钩子上的函数

webpack在整个打包过程中:

  • 通过loader处理特殊类型资源的加载，例如：加载样式、图片
  • 通过plugin实现各种自动化的构建任务，例如： 自动压缩、自动发布

工作原理剖析

“查阅”源码思路：

  1. Webpack Cli 启动打包流程
  2. 载入Webpack核心模块，创建Compiler对象
  3. 使用Compiler对象开始编译整个项目
  4. 从入口文件开始，解析模块依赖，形成依赖关系树
  5. 递归依赖树，将每个模块交给对应的Loader处理
  6. 合并Loder处理完的结果，将打包结果输出到dist目录

Webpack CLI

作用是将CLI参数和Webpack配置文件的中配置整合得到一个完整的配置对象
Webpack CLI 会通过 yargs 模块解析CLI参数（运行webpack命令时通过命令行传入的参数）