自信和希望是青年的特权。

               ——大仲马

本小节列出项目中常用的 Webpack Loader，大家在实际项目中有类似需求的可以直接通过本小节的介绍来快速查找使用。

JavaScript 相关

• babel-loader：把 ES6 转换成 ES5；
• script-loader：可以将指定的模块 JavaScript 文件转成纯字符串通过eval方式执行；
• exports-loader：可以导出指定的对象，例如window.Zepto；
• ts-loader：把 TypeScript 转换成 JavaScript；
• imports-loader：将任意三方的对象添加到window对象中。

样式相关

• style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS；
• css-loader：加载 CSS，支持模块化、压缩、文件导入等特性；
• postcss-loader：CSS 后处理器 postcss 的 loader；
• less-loader：把 less 代码转换成 CSS 代码；
• sass-loader：把 SCSS/SASS 代码转换成 CSS 代码；
• fast-sass-loader：并行处理 SCSS/SASS 文件，比 Sass-loader 快 5~10 倍的 loader；
• stylus-loader：把 Stylus 代码转换成 CSS 代码；
• mini-css-extract-plugin 的 loader：将 CSS 样式内容提取到 CSS 文件中。

静态资源相关

• raw-loader：把文本文件的内容加载到代码中去；
• file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件；
• url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去；
• html-loader：HTML 语法的 loader，可以处理 HTML 中的图片、CSS 等；
• svg-url-loader：把压缩后的 SVG 内容注入到代码中；
• markdown-loader：把 Markdown 文件转换成 HTML；
• ejs-loader：把 EJS 模版编译成函数返回；
• pug-loader：把 Pug 模版转换成 JavaScript 函数返回；
• image-webpack-loader：加载并且压缩图片文件；
• csv-loader：加载 csv 文件内容；
• xml-loader：加载 xml 文件内容。

工程相关

• eslint-loader：通过 ESLint 检查 JavaScript 代码；
• tslint-loader：通过 TSLint 检查 TypeScript 代码；
• mocha-loader：加载 Mocha 测试用例代码。

其他

• vue-loader：加载 Vue.js 单文件组件。