Loader 加载器
让 webpack 拥有加载和解析「非 js 文件」的能力
- css-loader: 加载 CSS，支持模块化、压缩、文件导入等特性
- style-loader: 使用
<style>把 css-loader 生成的内容挂在到 html 页面中 - babel-loader: 转换 ES6、7 等 js 新特性语法为 ES5
awesome-typescript-loader：将 TypeScript 转换成 JavaScript，性能优于 ts-loader- file-loader: 把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
- url-loader: 和 file-loader 类似，小于设置阈(yu)值情况下以 base64 的方式把文件内容注入到代码中 (例如小图)
- source-map-loader：加载额外的 Source Map 文件，以方便断点调试
- image-loader：加载并且压缩图片文件
- eslint-loader：通过 ESLint 检查 JavaScript 代码
Plugin 插件
插件扩展 webpack 的功能，在生命周期中广播事件，Plugin 监听事件，在合适的时机 通过 API 改变输出结果。
- HtmlWebpackPlugin：打包结束后自动生成一个 html 文件，并把打包生成的 js 模块引入到该 html 中。
- clean-webpack-plugin：打包的时候 清理输出目录文件
- define-plugin：定义环境变量（webpack4 之后指定 mode 会自动配置）
- uglifyjs-webpack-plugin 不支持 ES6 压缩 (Webpack4 以前)，如果需要 ES6 代码压缩，请使用 terser-webpack-plugin
- 主要是删除未引用代码(dead code)的能力，生产环境下默认使用 TerserPlugin(opens new window)
- webpack-parallel-uglify-plugin: 多核压缩,提高压缩速度
- webpack-bundle-analyzer: 可视化 webpack 输出文件的体积
- css-minimizer-webpack-plugin (opens new window)压缩 css 代码
###用法
- Loader 在
module.rules中配置，也就是说他作为模块的解析规则而存在。 类型为数组，每一项都是一个Object，里面描述了对于什么类型的文件（test），使用什么加载(loader)和使用的参数（options） - Plugin在
plugins中单独配置, 类型为数组，每一项是一个plugin的实例，参数都通过构造函数传入。
Webpack 构建流程
简单说
- 初始化：启动构建，读取与合并配置参数，加载 Plugin，实例化 Compiler
- 编译：从 Entry 出发，针对每个模块 Module 调用对应的 Loader 去翻译/解析文件的内容，再找到该 Module 依赖的 Module，递归地进行编译处理，得到最终内容以及它们之间的依赖关系。
- 输出：将编译后的 Module 组合成 Chunk，将 Chunk 转换成文件，根据配置确定输出路径和文件名，把文件内容写入到文件系统。
如何提高 webpack 的构建速度？
- 利用
DllPlugin和DllReferencePlugin预编译资源模块 通过DllPlugin来对那些我们引用但是绝对不会修改的 npm 包来进行预编译，再通过DllReferencePlugin将预编译的模块加载进来。 - 使用
Happypack实现多线程加速编译 - 使用
webpack-uglify-parallel来提升uglifyPlugin的压缩速度。 原理上webpack-uglify-parallel采用了多核并行压缩来提升压缩速度 - 使用
Tree-shaking来剔除多余代码
