webpack细节

概念

module、chunk、bundle

  • module:就是 js 的模块化 webpack 支持 CommonJS、ES6 等模块化规范,简单来说就是你通过 import 语句引入的代码

  • chunk:是 webpack 根据功能拆分出来的,包含三种情况:

    • 你的项目入口(entry)
    • 通过import()动态引入的代码
    • 通过splitChunks拆分出来的代码

chunk 包含 module,可能是一对多,也可能是一对一

  • bundle:是 webpack 打包之后的各个文件,一般就是和 chunk 是一对一的关系,bundle 就是对 chunk 进行编译压缩打包等处理之后的产物

Webpack 之 SplitChunks 插件用法详解:https://zhuanlan.zhihu.com/p/152097785