加载器 | 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