第五章：原理（深入浅出 Webpack 笔记）

基本概念

• Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
• Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。
  Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
• Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
• Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
• Plugin：扩展插件，在 Webpack 构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件的发生，在特定时机做对应的事情。

流程细节

Webpack 的构建流程可以分为以下三大阶段：

• 初始化：启动构建，读取与合并配置参数，加载 Plugin，实例化 Compiler。
• 编译：从 Entry 出发，针对每个 Module 串行调用对应的 Loader 去翻译文件内容，再找到该 Module 依赖的 Module，递归地进行编译处理。
• 输出：对编译后的 Module 组合成 Chunk，把 Chunk 转换成文件，输出到文件系统。

常用 Loaders

加载文件

• raw-loader：把文本文件的内容加载到代码中去。
• file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件。
• url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去。
• source-map-loader：加载额外的 Source Map 文件，以方便断点调试。
• svg-inline-loader：把压缩后的 SVG 内容注入到代码中。
• node-loader：加载 Node.js 原生模块 .node 文件。
• image-loader：加载并且压缩图片文件。
• json-loader：加载 JSON 文件。
• yaml-loader：加载 YAML 文件。

编译模版

• pug-loader：把 Pug 模版转换成 JavaScript 函数返回。
• handlebars-loader：把 Handlebars 模版编译成函数返回。
• ejs-loader：把 EJS 模版编译成函数返回。
• haml-loader：把 HAML 代码转换成 HTML。
• markdown-loader：把 Markdown 文件转换成 HTML。

转换脚本语言

• babel-loader：把 ES6 转换成 ES5。
• ts-loader：把 TypeScript 转换成 JavaScript。
• awesome-typescript-loader：把 TypeScript 转换成 JavaScript，性能要比 ts-loader 好。
• coffee-loader：把 CoffeeScript 转换成 JavaScript。

转换样式文件

• css-loader：加载 CSS，支持模块化、压缩、文件导入等特性。
• style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。
• sass-loader：把 SCSS/SASS 代码转换成 CSS。
• postcss-loader：扩展 CSS 语法，使用下一代 CSS。
• less-loader：把 Less 代码转换成 CSS 代码。
• stylus-loader：把 Stylus 代码转换成 CSS 代码。

检查代码

• eslint-loader：通过 ESLint 检查 JavaScript 代码。
• tslint-loader：通过 TSLint 检查 TypeScript 代码。
• mocha-loader：加载 Mocha 测试用例代码。
• coverjs-loader：计算测试覆盖率。

其它

• vue-loader：加载 Vue.js 单文件组件。
• i18n-loader：加载多语言版本，支持国际化。
• ignore-loader：忽略掉部分文件。
• ui-component-loader：按需加载 UI 组件库，例如在使用 antd UI 组件库时，不会因为只用到了 Button 组件而打包进所有的组件。

常用 Plugins

用于修改行为

• define-plugin：定义环境变量。
• context-replacement-plugin：修改 require 语句在寻找文件时的默认行为。
• ignore-plugin：用于忽略部分文件。

用于优化

• commons-chunk-plugin：提取公共代码。
• extract-text-webpack-plugin：提取 JavaScript 中的 CSS 代码到单独的文件中。
• prepack-webpack-plugin：通过 Facebook 的 Prepack 优化输出的 JavaScript 代码性能。
• uglifyjs-webpack-plugin：通过 UglifyES 压缩 ES6 代码。
• webpack-parallel-uglify-plugin：多进程执行 UglifyJS 代码压缩，提升构建速度。
• imagemin-webpack-plugin：压缩图片文件。
• webpack-spritesmith：用插件制作雪碧图。
• ModuleConcatenationPlugin：开启 Webpack Scope Hoisting 功能。
• dll-plugin：借鉴 DDL 的思想大幅度提升构建速度。
• hot-module-replacement-plugin：开启模块热替换功能。

其它

• serviceworker-webpack-plugin：给网页应用增加离线缓存功能。
• stylelint-webpack-plugin：集成 stylelint 到项目中。
• i18n-webpack-plugin：给你的网页支持国际化。
• provide-plugin：从环境中提供的全局变量中加载模块，而不用导入对应的文件。
• web-webpack-plugin：方便的为单页应用输出 HTML，比 html-webpack-plugin 好用。