Webpack详解

作用

webpack是node的第三方模块包，用于代码打包

• 前端工程化的解决方案

• 解决js和css兼容性问题

• 压缩合并html/js/css代码

使用

entry入口

webpack开始打包的文件，入口文件

output出口

webpack打包后输出的文件夹、文件名

module模块

一个模块对应一个文件，从入口文件开始查找

Compiler编译器

webpack启动后创建的编译器对象

chunk代码块

由多个模块组成，用于代码的分隔和合并

loader加载器

• 进行文件处理、转换（编译或压缩代码），是模块的解析规则
• 每个loader都只完成一个职责，只需要完成一种转换
• 在模块加载时预处理文件，运行在文件打包前
• 常见loader：less-loader, css-loader, url-loader

plugins插件

• 扩展webpack的功能，如优化打包、压缩代码、重新定义环境变量…
• 可以在webpack生命周期节点上添加监听等功能
• 整个编译周期都运行
• 常见plugin：CleanWebpackPlugin

流程

1. 初始化配置参数

   合并shell和webpack.config.js中的配置参数

2. 开始编译

   初始化Compiler对象，注册插件，执行Compiler的run方法开始编译

3. 确定入口

   找出入口文件

4. 编译模块

   从入口文件出发，调用loader编译，递归该模块的依赖模块进行编译

5. 完成编译并输出

   将编译完的文件结果根据entry配置生成chunk

6. 输出完成

   输出chunk到文件系统

---

[万字总结] 一文吃透 Webpack 核心原理