Skip to content

docs(cn): translate src/content/loaders/index.md #835

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Aug 23, 2020
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 43 additions & 43 deletions src/content/loaders/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,71 +11,71 @@ contributors:
- anshumanv
---

webpack enables use of [loaders](/concepts/loaders) to preprocess files. This allows you to bundle any static resource way beyond JavaScript. You can easily write your own loaders using Node.js.
Webpack 支持使用 [加载器 (loaders)](/concepts/loaders) 来对文件进行预处理。这让你可以打包包括 JavaScript 在内的任何静态资源。你可以使用 Node.js 轻松编写自己的加载器。

Loaders are activated by using `loadername!` prefixes in `require()` statements, or are automatically applied via regex from your webpack configuration – see [configuration](/concepts/loaders/#configuration).
通过在 `required()` 语句中使用 `loadername!` 的方式来使用加载器,或者在 Webpack 配置中配置 regex 来自动应用它们 - 请参阅 [配置](/concepts/loaders/#configuration)


## Files {#files}
## 文件 {#files}

- [`raw-loader`](/loaders/raw-loader) Loads raw content of a file (utf-8)
- [`val-loader`](/loaders/val-loader) Executes code as module and consider exports as JS code
- [`url-loader`](/loaders/url-loader) Works like the file loader, but can return a [data URL](https://tools.ietf.org/html/rfc2397) if the file is smaller than a limit
- [`file-loader`](/loaders/file-loader) Emits the file into the output folder and returns the (relative) URL
- [`ref-loader`](https://www.npmjs.com/package/ref-loader) Create dependencies between any files manually
- [`raw-loader`](/loaders/raw-loader) 加载文件的原始内容(utf-8
- [`val-loader`](/loaders/val-loader) 将代码作为模块执行,并将导出的内容视为 JS 代码
- [`url-loader`](/loaders/url-loader) 与文件加载器 [](/loaders/url-loader)类似,但是如果文件大写小于一个设置的值,则可以返回 [data URL](https://tools.ietf.org/html/rfc2397)
- [`file-loader`](/loaders/file-loader) 将文件复制到输出文件夹中并返回(相对)URL
- [`ref-loader`](https://www.npmjs.com/package/ref-loader) 手动创建任何文件之间的依赖关系


## JSON {#json}

- [`json5-loader`](/loaders/json5-loader) Loads and transpiles a [JSON 5](https://json5.org/) file
- [`cson-loader`](https://github.com/awnist/cson-loader) Loads and transpiles a [CSON](https://github.com/bevry/cson#what-is-cson) file
- [`json5-loader`](/loaders/json5-loader) 加载和转换 [JSON 5](https://json5.org/) 文件
- [`cson-loader`](https://github.com/awnist/cson-loader) 加载和转换 [CSON](https://github.com/bevry/cson#what-is-cson) 文件


## Transpiling {#transpiling}
## 语法转换 {#transpiling}

- [`babel-loader`](/loaders/babel-loader) Loads ES2015+ code and transpiles to ES5 using [Babel](https://babeljs.io/)
- [`buble-loader`](https://github.com/sairion/buble-loader) Loads ES2015+ code and transpiles to ES5 using [Bublé](https://buble.surge.sh/guide/)
- [`traceur-loader`](https://github.com/jupl/traceur-loader) Loads ES2015+ code and transpiles to ES5 using [Traceur](https://github.com/google/traceur-compiler#readme)
- [`ts-loader`](https://github.com/TypeStrong/ts-loader) Loads [TypeScript](https://www.typescriptlang.org/) 2.0+ like JavaScript
- [`coffee-loader`](/loaders/coffee-loader) Loads [CoffeeScript](http://coffeescript.org/) like JavaScript
- [`fengari-loader`](https://github.com/fengari-lua/fengari-loader/) Loads Lua code using [fengari](https://fengari.io/)
- [`elm-webpack-loader`](https://github.com/elm-community/elm-webpack-loader) Loads [Elm](https://elm-lang.org/) like JavaScript
- [`babel-loader`](/loaders/babel-loader) 使用 [Babel](https://babeljs.io/) 加载 ES2015 + 代码并转换为 ES5
- [`buble-loader`](https://github.com/sairion/buble-loader) 使用 [Bublé](https://buble.surge.sh/guide/) 将 ES2015 + 代码加载并转换为 ES5
- [`traceur-loader`](https://github.com/jupl/traceur-loader) 使用 [Traceur](https://github.com/google/traceur-compiler#readme) 将 ES2015 + 代码加载并转换为 ES5
- [`ts-loader`](https://github.com/TypeStrong/ts-loader) 像加载 Javascript 那样加载 [TypeScript](https://www.typescriptlang.org/) 2.0+
- [`coffee-loader`](/loaders/coffee-loader) 像加载 Javascript 那样加载 [CoffeeScript](http://coffeescript.org/)
- [`fengari-loader`](https://github.com/fengari-lua/fengari-loader/) 使用 [fengari](https://fengari.io/) 加载 Lua 代码
- [`elm-webpack-loader`](https://github.com/elm-community/elm-webpack-loader) 像加载 Javascript 那样加载 [Elm](https://elm-lang.org/)


## Templating {#templating}
## 模板 {#templating}

- [`html-loader`](/loaders/html-loader) Exports HTML as string, require references to static resources
- [`pug-loader`](https://github.com/pugjs/pug-loader) Loads Pug and Jade templates and returns a function
- [`markdown-loader`](https://github.com/peerigon/markdown-loader) Compiles Markdown to HTML
- [`react-markdown-loader`](https://github.com/javiercf/react-markdown-loader) Compiles Markdown to a React Component using the markdown-parse parser
- [`posthtml-loader`](https://github.com/posthtml/posthtml-loader) Loads and transforms a HTML file using [PostHTML](https://github.com/posthtml/posthtml)
- [`handlebars-loader`](https://github.com/pcardune/handlebars-loader) Compiles Handlebars to HTML
- [`markup-inline-loader`](https://github.com/asnowwolf/markup-inline-loader) Inline SVG/MathML files to HTML. It’s useful when applying icon font or applying CSS animation to SVG.
- [`twig-loader`](https://github.com/zimmo-be/twig-loader) Compiles Twig templates and returns a function
- [`remark-loader`](https://github.com/webpack-contrib/remark-loader) Load markdown through `remark` with built-in image resolution
- [`html-loader`](/loaders/html-loader) HTML 导出为字符串,需要传入静态资源的引用路径
- [`pug-loader`](https://github.com/pugjs/pug-loader) 加载 Pug Jade 模板并返回一个函数
- [`markdown-loader`](https://github.com/peerigon/markdown-loader) Markdown 编译为 HTML
- [`react-markdown-loader`](https://github.com/javiercf/react-markdown-loader) 使用 markdown-parse 解析器将 Markdown 编译为 React 组件
- [`posthtml-loader`](https://github.com/posthtml/posthtml-loader) 使用 [PostHTML](https://github.com/posthtml/posthtml) 加载和转换 HTML 文件
- [`handlebars-loader`](https://github.com/pcardune/handlebars-loader) Handlebars 文件编译为 HTML
- [`markup-inline-loader`](https://github.com/asnowwolf/markup-inline-loader) SVG / MathML 文件内嵌到 HTML 中。在将图标字体或 CSS 动画应用于 SVG 时,此功能很有用。
- [`twig-loader`](https://github.com/zimmo-be/twig-loader) 编译 Twig 模板并返回一个函数
- [`remark-loader`](https://github.com/webpack-contrib/remark-loader) 通过 `remark` 加载 markdown,支持解析内容中的图片


## Styling {#styling}
## 样式 {#styling}

- [`style-loader`](/loaders/style-loader) Add exports of a module as style to DOM
- [`css-loader`](/loaders/css-loader) Loads CSS file with resolved imports and returns CSS code
- [`less-loader`](/loaders/less-loader) Loads and compiles a LESS file
- [`sass-loader`](/loaders/sass-loader) Loads and compiles a SASS/SCSS file
- [`postcss-loader`](/loaders/postcss-loader) Loads and transforms a CSS/SSS file using [PostCSS](http://postcss.org)
- [`stylus-loader`](https://github.com/shama/stylus-loader) Loads and compiles a Stylus file
- [`style-loader`](/loaders/style-loader) 将模块的导出内容作为样式添加到 DOM
- [`css-loader`](/loaders/css-loader) 使用已解析的导入加载 CSS 文件并返回 CSS 代码
- [`less-loader`](/loaders/less-loader) 加载并编译 LESS 文件
- [`sass-loader`](/loaders/sass-loader) 加载并编译 SASS / SCSS 文件
- [`postcss-loader`](/loaders/postcss-loader) 使用 [PostCSS](http://postcss.org) 加载和转换 CSS / SSS 文件
- [`stylus-loader`](https://github.com/shama/stylus-loader) 加载并编译 Stylus 文件


## Linting && Testing {#linting--testing}
## Linting 和测试 {#linting--test}

- [`mocha-loader`](/loaders/mocha-loader) Tests with [mocha](https://mochajs.org/) (Browser/NodeJS)
- [`eslint-loader`](https://github.com/webpack-contrib/eslint-loader) PreLoader for linting code using [ESLint](https://eslint.org/)
- [](https://mochajs.org/)[`mocha-loader`](/loaders/mocha-loader) 使用 [mocha](https://mochajs.org/) (Browser/NodeJS) 进行测试
- [`eslint-loader`](https://github.com/webpack-contrib/eslint-loader) 使用 [ESLint](https://eslint.org/) linting 代码

## Frameworks {#frameworks}
## 框架 {#frameworks}

- [`vue-loader`](https://github.com/vuejs/vue-loader) Loads and compiles [Vue Components](https://vuejs.org/v2/guide/components.html)
- [`polymer-loader`](https://github.com/webpack-contrib/polymer-webpack-loader) Process HTML & CSS with preprocessor of choice and `require()` Web Components like first-class modules
- [`angular2-template-loader`](https://github.com/TheLarkInn/angular2-template-loader) Loads and compiles [Angular](https://angular.io/) Components
- [`vue-loader`](https://github.com/vuejs/vue-loader) 加载和编译 [Vue 组件](https://vuejs.org/v2/guide/components.html)
- [`polymer-loader`](https://github.com/webpack-contrib/polymer-webpack-loader) 使用选择的预处理程序处理 HTML CSS 以及使用 `require()` 以模块的方式处理 Web Components
- [`angular2-template-loader`](https://github.com/TheLarkInn/angular2-template-loader) 加载和编译 [Angular](https://angular.io/) 组件

## Awesome {#awesome}

For more third-party loaders, see the list from [awesome-webpack](https://github.com/webpack-contrib/awesome-webpack#loaders).
有关更多第三方加载器,请参阅 [awesome-webpack](https://github.com/webpack-contrib/awesome-webpack#loaders) 中的列表。