Webpack附录

查看所有文档页面： ，获取更多信息。

原文链接： ，原文广告模态框遮挡，阅读体验不好，所以整理成本文，方便查找。

常用 Loaders

加载文件

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

编译模版

• ：把 Pug 模版转换成 JavaScript 函数返回。
• ：把 Handlebars 模版编译成函数返回。
• ：把 EJS 模版编译成函数返回。
• ：把 HAML 代码转换成 HTML。
• ：把 Markdown 文件转换成 HTML。

转换脚本语言

• ：把 ES6 转换成 ES5，在 中有介绍。
• ：把 TypeScript 转换成 JavaScript，在中有遇到。
• ：把 TypeScript 转换成 JavaScript，性能要比 ts-loader 好。
• ：把 CoffeeScript 转换成 JavaScript。

转换样式文件

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

检查代码

• ：通过 ESLint 检查 JavaScript 代码，在 中有介绍。
• ：通过 TSLint 检查 TypeScript 代码。
• ：加载 Mocha 测试用例代码。
• ：计算测试覆盖率。

其它

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

常用 Plugins

用于修改行为

• ：定义环境变量，在中有介绍。
• ：修改 require 语句在寻找文件时的默认行为。
• ：用于忽略部分文件。

用于优化

• ：提取公共代码，在中有介绍。
• ：提取 JavaScript 中的 CSS 代码到单独的文件中，在 中有介绍。
• ：通过 Facebook 的 Prepack 优化输出的 JavaScript 代码性能，在 中有介绍。
• ：通过 UglifyES 压缩 ES6 代码，在 中有介绍。
• ：多进程执行 UglifyJS 代码压缩，提升构建速度。
• ：压缩图片文件。
• ：用插件制作雪碧图。
• ：开启 Webpack Scope Hoisting 功能，在中有介绍。
• ：借鉴 DDL 的思想大幅度提升构建速度，在中有介绍。
• ：开启模块热替换功能。

其它

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