原文章
Loaders are transformations that are applied to the source code of a module. They allow you to pre-process files as you import or “load” them. Thus, loaders are kind of like “tasks” in other build tools and provide a powerful way to handle front-end build steps. Loaders can transform files from a different language (like TypeScript) to JavaScript or load inline images as data URLs. Loaders even allow you to do things like import CSS files directly from your JavaScript modules!
Loader 是处理模块源代码的转换工具。当你import/load文件时它允许你预处理文件。loaders是一种类似任务在其它构建工具中，并且提供有用的方法来处理前端构建步骤。loaders可以把不同种类语言文件(例如typescript)转换成javascript,或者加载线上图片，比如data urls。loaders 甚至允许你做一些例如直接从你的Javascript模块中加载css文件.
Example
For example, you can use loaders to tell webpack to load a CSS file or to convert TypeScript to JavaScript. To do this, you would start by installing the loaders you need:
例如，你可以使用loaders来告诉webpack加载css文件或者转换typescript成javascript. 为了完成这个目标，你首先要安装所需要的loader.
npm install --save-dev css-loader ts-loader
And then instruct webpack to use the css-loader for every .css file and the ts-loader for all .ts files:
然后训练webpack使用css-loader处理所有的css文件，使用ts-loader 来处理所有的.ts文件
module.exports = {
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' },
{ test: /\.ts$/, use: 'ts-loader' }
]
}
};
Configuration
module.rules allows you to specify several loaders within your webpack configuration. This is a concise way to display loaders, and helps to maintain clean code. It also offers you a full overview of each respective loader
module.rules 允许你定义多个Loaders 在你的webpack 配置中。 这是一个简洁的方法来显示Loaders,并且有助于保持代码的整洁。它也为你提供了一套完整的描述给每个loader
Loaders are evaluated/executed from right to left (or from bottom to top). In the example below execution starts with sass-loader, continues with css-loader and finally ends with style-loader. See "Loader Features" for more information about loaders order.
loaders 会被从下到上/右到左执行。在下面的例子中会先执行sass-loader,然后再到css-loader,最后才是style-loader.查看"Loader Features" 可以查看更多的关于loader 的信息；
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
// style-loader
{ loader: 'style-loader' },
// css-loader
{
loader: 'css-loader',
options: {
modules: true
}
},
// sass-loader
{ loader: 'sass-loader' }
]
}
]
}
};
Loader Features (Loader特征)
- Loaders can be chained. Each loader in the chain applies transformations to the processed resource. A chain is executed in reverse order. The first loader passes its result (resource with applied transformations) to the next one, and so forth. Finally, webpack expects JavaScript to be returned by the last loader in the chain.
- Loader 可以是链式的。每个loader 在链式应用中转换进程原码。一个链被逆转命令执行，第一个loader会把结果（转换工具处理过的代码的结果)发给下一个，这这样，最后webpack可以从chain的最后一个loader返回的javascript得到结果
- Loaders can be synchronous or asynchronous.
- Loader 可以是同步或者异步
- Loaders run in Node.js and can do everything that’s possible there.
- Loader 是可以node.js中运行，它可以做node.js可以做的所有功能；
- Loaders can be configured with an options object (using query parameters to set options is still supported but has been deprecated).
- Loader 可以使用一个options对对象来配置(使用query参数来配置options是依旧支持，但是已经被弃用了)
- Normal modules can export a loader in addition to the normal main via package.json with the loader field.
- 普通的Modules除了package.json的loader字段之外，还可以导出一个加载器
- Plugins can give loaders more features.
- 插件可以赋与loader更多的功能；
- Loaders can emit additional arbitrary files.
- loaders可以发送其它任意文件；
Loaders provide a way to customize the output through their preprocessing functions. Users now have more flexibility to include fine-grained logic such as compression, packaging, language translations and more.
Loader提供一种方法通过他们的processing方法来自定义output输出。用户可现在可以有更多的灵活性包括像压缩、打包、语言转换和更多的细颗粒的逻辑；
Resolving Loaders
Loaders follow the standard module resolution. In most cases it will be loaded from the module path (think npm install, node_modules).
Loading 遵守标准模块解决方案。大部分情况下它会被从module中加载（像npm isntall,node_modules);
A loader module is expected to export a function and be written in Node.js compatible JavaScript. They are most commonly managed with npm, but you can also have custom loaders as files within your application. By convention, loaders are usually named xxx-loader (e.g. json-loader). See "Writing a Loader" for more information.
一个loader模块期望导出一个方法并写到node.js 兼容的javascript. 它们通常使用npm进行管理，但你也可以在你的项目中使用文件自定义loader.按照惯例，loader使用xxx-loader来命名(例如json-loader).查看"writting a Loader" 看更多信息.
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
