面试取经：工程化篇-Webpack编译过程

webpack 的作用是将源代码编译（构建、打包）成最终代码

编译过程

1. 初始化
2. 编译
3. 输出

初始化

webpack会将CLI参数

npx webpack --mode=xxx -config xxx

配置文件 webpack.config.js，以及默认配置进行融合，形成最终的配置文件

编译

1.创建chunk

chunk是webpack在内部构建过程中的一个概念，译为块，它表示通过某个入口找到的所有依赖的统称。

根据入口模块（默认为./src/index.js）创建一个chunk

每个chunk都有至少两个属性：

• name：默认为main

• id：唯一编号，开发环境和name相同，生产环境是一个数字，从0开始

  •     module.exports = {
            mode: 'development'
        }
    

2.构建所有依赖模块

3.产生chunk assets

在第二步完成后，chunk中会产生一个模块列表，列表中包含了模块id和模块转换后的代码

接下来，webpack会根据配置为chunk生成一个资源列表，即chunk assets，资源列表可以理解为是生成到最终文件的文件名和文件内容

chunk hash是根据所有chunk assets的内容生成的一个hash字符串 hash：一种算法，具体有很多分类，特点是将一个任意长度的字符串转换为一个固定长度的字符串，而且可以保证原始内容不变，产生的hash字符串就不变

4.合并chunk assets

将多个chunk的assets合并到一起，并产生一个总的hash

输出

webpack将利用node中的fs模块（文件处理模块），根据编译产生的总的assets，生成相应的文件。

总过程

tips：以上信息来自渡一相关学习资料，供自己学习和面试使用。