Webpack 核心功能
- 编译浏览器无法理解的东西（e.g. ES6、TS、Vue）
- 代替手动操作（e.g. 文件合并和拆分，图片压缩，资源处理）
- 帮助开发（e.g. 开发模式）
Webpack 包含哪些核心模块？
- entry（入口）：指示 Webpack 从哪个文件开始打包
- output（出口）：指示 Webpack 打包完的文件输出到哪里去，如何命名等
- loader（加载器）：webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析
- plugins（插件）：扩展 Webpack 的功能
- mode（模式）：主要由两种模式：
- 开发模式：development
- 生产模式：production
Webpack 常见的 Loader
- file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件（Webpack5 有自己的方法）
- url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去（Webpack5 有自己的方法）
- sass-loader：把 Sass 编译成 CSS
- css-loader：让 webpack 识别 CSS
- style-loader：把 CSS 写入 JS，执行后作为 style 标签插入到 html 文件中
- postcss-loader：扩展 CSS 语法，比如高阶的选择器、高阶的 CSS 属性、高阶的 CSS 值
- image-loader：加载并且压缩图片文件
- babel-loader：把 ES6 转换成 ES5
注意： 在 Webpack 中，loader 的执行顺序是从右向左执行的。因为 webpack 选择了 compose 这样的函数式编程方式，这种方式的表达式执行是从右向左的。
常见的 Plugin
- html-webpack-plugin：简化 html 文件创建
- copy-webpack-plugin：拷贝文件
- clean-webpack-plugin：删除（清理）构建目录
- eslint-webpack-plugin：通过 ESLint 检查 JavaScript 代码
- mini-css-extract-plugin：提取 CSS 为独立的文件
- css-minimizer-webpack-plugin：压缩 CSS
splitVendorChunkPlugin 的作用？
把第三方包打成一个 vendor，和业务代码分开，可以充分利用浏览器缓存。
什么是 tree shaking？
把没有用到的代码给删掉，但是前提要使用 ES6 module
Webpack 缺点
- 打包速度慢
- 即使支持了动态模块热重载（HMR），随着应用规模的增长而显著下降
bundle、chunk、module 是什么？
- bundle：是由 webpack 打包出来的文件
- chunk：代码块，一个 chunk 由多个模块组合而成，用于代码的合并和分割
- module：是开发中的单个模块，在 webpack 的世界，一切皆模块，一个模块对应一个文件，webpack 会从配置的 entry 中递归开始找出所有依赖的模块