加载器 | Loaders

Loaders

例

例如，您可以使用 loaders来告诉webpack加载CSS文件或将TypeScript转换为JavaScript。要做到这一点，你首先要安装你需要的 loaders：

npm install --save-dev css-loader
npm install --save-dev ts-loader

然后指示webpack对每个.css文件使用css-loader，对所有.ts文件使用ts-loader：

webpack.config.js

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

使用Loaders

有三种方法可以在应用程序中使用Loaders：

配置（推荐）：在你的webpack.config.js文件中指定它们。

内联：在每个import语句中明确指定它们。

CLI：在shell命令中指定它们。

配置

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }

内联

import Styles from 'style-loader!css-loader?modules!./styles.css';

选项可以通过查询参数传递，例如?key=value&foo=bar，或JSON对象，例如?{"key":"value","foo":"bar"}。

尽可能使用 module.rules，因为这样可以减少源码中的代码量，并且可以在出错时，更快地调试和定位 loader 中的问题。

CLI

您也可以通过CLI使用加载器：

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

加载程序功能

loader 支持链式传递。能够对资源使用流水线(pipeline)。一组链式的 loader 将按照相反的顺序执行。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript。

Loaders可以是同步的或异步的。

Loaders 在Node.js中运行，并且可以在那里做所有可能的事情。

加载程序接受查询参数。这可以用来将配置传递给加载器。

Loaders 也可以配置一个options对象。

除了使用 package.json 常见的 main 属性，还可以将普通的 npm 模块导出为 loader，做法是在 package.json 里定义一个 loader 字段。

插件可以给Loaders更多的功能。

Loaders可以发出额外的任意文件。

加载器 | Loaders

Loaders

例

使用Loaders

配置

内联

CLI

加载程序功能

解决型Loaders