1.Webpack: 基本概念

Entry 和 Chunk

entry 指定开始打包的入口文件，entry 配置的就是 chunk 名和入口模块：

webpack 会根据入口模块创建一个 chunk，一个项目中可以配置多个 chunk。

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

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

entry: {
    main: "./src/index.js", //属性名：chunk的名称， 属性值：入口模块（启动模块）
    a: ["./src/a.js", "./src/index.js"] //启动模块有两个
}

module、Chunk、Bundle

• 其实是同一份逻辑代码在不同转换场景下的取了三个名字：
• 我们直接写出来的是 module，webpack 处理时是 chunk，最后生成浏览器可以直接运行的 bundle
• 一般是一对一关系，bundle 就是 chunk 打包后的产出。（也有例外，比如配 source-map，那么 main 这个 chunks、最终会打包出 main.js 和 main.js.map 两个 bundle。）

三种情况：

1. entry
2. 异步加载模块：require
3. splitChunks 拆分的