Webpack loader

Question

Webpack​ 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块 ，以供应用程序使用，以及被添加到依赖图中。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript 或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS 文件！

注意：使用正则表达式匹配文件时，不要为它添加引号。也就是说， /\.txt$/ 与 '/\.txt$/'/ "/\.txt$/" 不一样。前者指示 webpack 匹配任何以 .txt ​ 结尾的文件，后者指示 webpack 匹配具有绝对路径 .txt ​ 的单个文件。

使用 loader（3 种）

1、配置（推荐）：在 webpack.config.js 文件中指定 loader。

在 module.rules webpack 配置中指定多个 loader。loader 从右到左地取值 (evaluate) / 执行(execute)。下面的示例中，从 sass-loader 开始执行，然后继续执行 css-loader，最后以 style-loader 为结束。

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

2、内联：在每个 import 语句中显式指定 loader。

在 import 语句或任何 等同于 import 的方法 中指定 loader。

使用 ! 将资源中的 loader 分开。每个部分都会相对于当前目录解析。使用 ! 为整个规则添加前缀，可以覆盖配置中的所有 loader 定义。选项可以传递查询参数，例如 ?key=value&foo=bar ，或者一个 JSON 对象，例如 ?{"key":"value","foo":"bar"} 。

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

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

下面实例对 .jade 文件使用 jade-loader ，以及对 .css 文件使用 style-loader 和 css-loader 。

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