loader · 前端

有三种使用 loader 的方式： * [配置](https://www.webpackjs.com/concepts/loaders/#configuration)（推荐）：在**webpack.config.js**文件中指定 loader。 * [内联](https://www.webpackjs.com/concepts/loaders/#inline)：在每个`import`语句中显式指定 loader。 * [CLI](https://www.webpackjs.com/concepts/loaders/#cli)：在 shell 命令中指定它们。这里我们只列举配置的方法 ## **文件** * [`raw-loader`](https://www.webpackjs.com/loaders/raw-loader "npm install --save-dev raw-loader")加载文件原始内容（utf-8） * [`val-loader`](https://www.webpackjs.com/loaders/val-loader 'npm i -D val-loader')将代码作为模块执行，并将 exports 转为 JS 代码 * [`url-loader`](https://www.webpackjs.com/loaders/url-loader 'npm install --save-dev url-loader')像 file loader 一样工作，但如果文件小于限制，可以返回[data URL](https://tools.ietf.org/html/rfc2397) * [`file-loader`](https://www.webpackjs.com/loaders/file-loader "npm install --save-dev file-loader")将文件发送到输出文件夹，并返回（相对）URL * [`ref-loader`](https://www.npmjs.com/package/ref-loader "npm i ref-loader -D")在任何文件之间手动创建依赖关系【webpack5文档新增】 ## **JSON** * [`json-loader`](https://www.webpackjs.com/loaders/json-loader "npm install --save-dev json-loader")加载[JSON](http://json.org/)文件（默认包含无需再次下载） * [`json5-loader`](https://www.webpackjs.com/loaders/json5-loader "npm install --save-dev json5-loader")加载和转译[JSON 5](https://json5.org/)文件 * `cson-loader`加载和转译[CSON](https://github.com/bevry/cson#what-is-cson)文件 ## **转换编译(Transpiling)** * [`script-loader`](https://www.webpackjs.com/loaders/script-loader "npm install --save-dev script-loader")在全局上下文中执行一次 JavaScript 文件（如在 script 标签），不需要解析『webpack5文档没描述』 * [`babel-loader`](https://www.webpackjs.com/loaders/babel-loader "npm install -D babel-loader @babel/core @babel/preset-env webpack")js兼容处理；加载 ES2015+ 代码，然后使用[Babel](https://babeljs.io/)转译为 ES5（推荐babel比buble和traceur优秀） * `buble-loader`使用[Bublé](https://buble.surge.sh/guide/)js兼容处理；加载 ES2015+ 代码，并且将代码转译为 ES5 * `traceur-loader`js兼容处理；加载 ES2015+ 代码，然后使用[Traceur](https://github.com/google/traceur-compiler#readme)转译为 ES5 * [`ts-loader`](https://github.com/TypeStrong/ts-loader)或[`awesome-typescript-loader`](https://github.com/s-panferov/awesome-typescript-loader)：像 JavaScript 一样加载[TypeScript](https://www.typescriptlang.org/)2.0+ * [`coffee-loader`](https://www.webpackjs.com/loaders/coffee-loader)像 JavaScript 一样加载[CoffeeScript](http://coffeescript.org/) * [`fengari-loader`](https://github.com/fengari-lua/fengari-loader/)使用[fengari](https://fengari.io/)加载Lua代码【webpack5文档新增】 * [`elm-webpack-loader`](https://github.com/elm-community/elm-webpack-loader)像JavaScript一样加载[Elm](https://elm-lang.org/)【webpack5文档新增】 ## **模板(Templating)** * [`html-loader`](https://www.webpackjs.com/loaders/html-loader "npm i -D html-loader")导出 HTML 为字符串，需要引用静态资源 * `pug-loader`加载 Pug 模板并返回一个函数 * `jade-loader`加载 Jade 模板并返回一个函数 * `markdown-loader`将 Markdown 转译为 HTML * [`react-markdown-loader`](https://github.com/javiercf/react-markdown-loader)使用 markdown-parse parser(解析器) 将 Markdown 编译为 React 组件 * `posthtml-loader`使用[PostHTML](https://github.com/posthtml/posthtml)加载并转换 HTML 文件 * `handlebars-loader`将 Handlebars 转移为 HTML * [`markup-inline-loader`](https://github.com/asnowwolf/markup-inline-loader)将内联的 SVG/MathML 文件转换为 HTML。在应用于图标字体，或将 CSS 动画应用于 SVG 时非常有用。 ## **样式** * [`style-loader`](https://www.webpackjs.com/loaders/style-loader)将模块的导出作为样式添加到 DOM 中 * [`css-loader`](https://www.webpackjs.com/loaders/css-loader)解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码 * [`less-loader`](https://www.webpackjs.com/loaders/less-loader)加载和转译 LESS 文件 * [`sass-loader`](https://www.webpackjs.com/loaders/sass-loader)加载和转译 SASS/SCSS 文件 * [`postcss-loader`](https://www.webpackjs.com/loaders/postcss-loader)使用[PostCSS](http://postcss.org/)加载和转译 CSS/SSS 文件 * `stylus-loader`加载和转译 Stylus 文件 ## **清理和测试(Linting && Testing)** * [`mocha-loader`](https://www.webpackjs.com/loaders/mocha-loader)使用[mocha](https://mochajs.org/)测试（浏览器/NodeJS） * [`eslint-loader`](https://github.com/webpack-contrib/eslint-loader)PreLoader，使用[ESLint](https://eslint.org/)清理代码 * [`jshint-loader`](https://www.webpackjs.com/loaders/jshint-loader)PreLoader，使用[JSHint](http://jshint.com/about/)清理代码 * `jscs-loader`PreLoader，使用[JSCS](http://jscs.info/)检查代码样式 * [`coverjs-loader`](https://www.webpackjs.com/loaders/coverjs-loader)PreLoader，使用[CoverJS](https://github.com/arian/CoverJS)确定测试覆盖率 ## **框架(Frameworks)** * `vue-loader`加载和转译[Vue 组件](https://vuejs.org/v2/guide/components.html) * `polymer-loader`使用选择预处理器(preprocessor)处理，并且`require()`类似一等模块(first-class)的 Web 组件 * `angular2-template-loader`加载和转译[Angular](https://angular.io/)组件 ## **其他** [`yaml-frontmatter-loader`](https://v4.webpack.docschina.org/loaders/yaml-frontmatter-loader/) 用于Webpack的YAML Frontmatter加载程序。将文件中的YAML转换为JSON。您应该与json-loader连用 [cache-loader](https://v4.webpack.docschina.org/loaders/cache-loader/ 'npm install --save-dev cache-loader') 将以下loader的结果缓存在磁盘（默认）或数据库中(推荐在性能开销较大的 loader 之前添加此 loader) [coffee-redux-loader](https://v4.webpack.docschina.org/loaders/coffee-redux-loader/) 用于Webpack的Coffee Script Redux加载程序 [config-loader](https://v4.webpack.docschina.org/loaders/config-loader/) 已淘汰，请使用`webpack-cli` [exports-loader](https://v4.webpack.docschina.org/loaders/exports-loader/ "npm install exports-loader --save-dev") 导出webpack的加载程序模块通过附加export \[...\] = ...语句从文件内部导出变量 [expose-loader](https://v4.webpack.docschina.org/loaders/expose-loader/) expose loader向全局对象添加模块。这对于调试或支持依赖全局库的库非常有用 [extract-loader](https://v4.webpack.docschina.org/loaders/extract-loader/) **提取HTML和CSS** 类似于[extract-text-webpack-plugin](https://v4.webpack.docschina.org/plugins/extract-text-webpack-plugin/)和[mini-css-extract-plugin](https://v4.webpack.docschina.org/plugins/mini-css-extract-plugin/) [gzip-loader](https://v4.webpack.docschina.org/loaders/gzip-loader/) 启用加载压缩后的资源 [i18n-loader](https://www.webpackjs.com/loaders/i18n-loader/) [imports-loader/](https://www.webpackjs.com/loaders/imports-loader) 导入加载程序允许您使用依赖于特定全局变量的模块 [istanbul-instrumenter-loader](https://v4.webpack.docschina.org/loaders/istanbul-instrumenter-loader/) [bundle-loader](https://v4.webpack.docschina.org/loaders/bundle-loader/) 使用istanbul-lib-instrument来测试JS文件，以进行后续代码覆盖率报告 [multi-loader](https://www.webpackjs.com/loaders/multi-loader/) [node-loader](https://www.webpackjs.com/loaders/node-loader/) [null-loader](https://v4.webpack.docschina.org/loaders/null-loader/) 返回空模块的loader [polymer-webpack-loader](https://v4.webpack.docschina.org/loaders/polymer-webpack-loader/) 将html中的外联转换为import [react-proxy-loader](https://v4.webpack.docschina.org/loaders/react-proxy-loader/) [restyle-loader](https://v4.webpack.docschina.org/loaders/restyle-loader/) 样式重载 [source-map-loader](https://v4.webpack.docschina.org/loaders/source-map-loader/) 从所有JavaScript条目中提取现有的源映射 [svg-inline-loader](https://v4.webpack.docschina.org/loaders/svg-inline-loader/) 将SVG内联为模块 [thread-loader](https://v4.webpack.docschina.org/loaders/thread-loader/) [transform-loader](https://v4.webpack.docschina.org/loaders/transform-loader/) [worker-loader](https://v4.webpack.docschina.org/loaders/worker-loader/) [workerize-loader](https://v4.webpack.docschina.org/loaders/workerize-loader/)