Concepts - Loaders（官网）

官网链接：https://webpack.js.org/concepts/loaders/

这一章节讲述了 loaders 的配置方法

一、一个简单的例子

command-line 安装 css-loader 和 ts-loader

yarn add -D css-loader ts-loader

配置 webpack.config.js

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

通过这种方式，webpack 能够使用 css-loader 作用到每个 .css 文件，使用 ts-loader 作用到每个 .ts 文件

二、使用方法

有两种方式使用 loaders

• 配置方式（更推荐）：在 webpack.config.js 文件中指定
• 内联方式：使用 import 语句明确指定

1. 配置方式

module.rule 指定 loaders 的配置项目

• 它使用简洁的方式展示 loaders，让我们对每个 loader 有一个概览
• loaders 的执行顺序从右到左，下面的例子中，.css 文件先经过 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 语句或者其他等价的 importing 方法来指明 loaders

• 通过 ! 来将资源和 loaders 分隔，每个部分只于当前目录相关

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

  这种方式可以让我们在 import 语句使用简单的前缀来重写任何 loaders、preLoaders 和 postLoaders

• ! 前缀将禁用所有配置的 normal loaders

• !! 前缀将禁用所有配置的 loaders（preLoaders、loaders、postLoaders）
• -! 前缀将禁用所有配置的 preLoaders 和 loaders，不包括 postLoaders ```javascript import Styles from ‘!style-loader!css-loader?modules!./styles.css’;

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

import Styles from ‘-!style-loader!css-loader?modules!./styles.css’; `` options 的传递方式可以是 query parameter ——?key=value&foo=bar，也可以是 JSON object ——?{“key”:”value”,”foo”:”bar”}`

三、Loader 特性

• Loaders 可以像链条一样串起来用，每个在链条中的 loader 都将自己的转换作用于资源上。第一个 loader 传递自己处理过后的结果给下一个，一个接着一个，最后 webpack 等待着链条中最后一个 loader 返回出的 JavaScript
• Loaders 可以是异步的，也可以是同步的
• Loaders 运行于 Node.js，所以它能做很多事情
• Loaders 是可配置的，通过 options 对象即可（query 的方式被废弃了）
• 除了 package.json 中的 main，normal modules 可以通过 loader field 导出一个 loader
• 插件可以给 loaders 更多的特性
• Loaders 可以触发其他任意的文件

Loaders 提供了一种方式来自定义输出通过他们的预处理函数。用户对逻辑的颗粒度有了更多的自由度例如压缩、打包、语言翻译和更多

四、解析 Loader

Loaders 遵循模块解析标准，在大多数情况下它从 module path（npm install，node_modules）中被加载

• 一个 loader 模块期望输出一个函数，这个函数是 Node.js 兼容的 JavaScript
• 它们通常使用 npm 来管理
• 按照一般惯例，loaders 通常命名为 xxx-loader

「@浪里淘沙的小法师」