loader

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或 "load(加载)" 模块时预处理文件。

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

使用loader

1. 配置方式：webpack.config.js指定loader。就是单纯的配置在rules就可以，能按照use的顺序从上倒下按照loader声明的顺序按序执行。

   style-loader => saas-loader

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

2. 内联方式：import指定loader，适用于所有 loader, preLoader 和 postLoader

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

这种方法不太常用，且不太容易在出错时候定位，不推荐哦！ 有三种编写规则，大家姑且一看

• 使用 ! 前缀，将禁用所有已配置的 normal loader(普通 loader)

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

• 使用 !! 前缀，将禁用所有已配置的 loader（preLoader, loader, postLoader）

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

• 使用 -! 前缀，将禁用所有已配置的 preLoader 和 loader，但是不禁用 postLoaders

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

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

loader特性

实际上就是韩梅梅要告诉搬家公司，如何打包自己的行李。

loader被认为是预处理函数，可以提供例如压缩、打包、编译等能力。

• 支持链式调用，每个loader都会处理前置已经处理过的资源，直到最后一个loader加载处理完毕。一组链式的 loader 将按照相反的顺序执行
• loader可以异步或者是同步
• 可以运行在Node.js中，可以执行任何操作
• 能够产生额外的文件

常用loader

实战：编写一个loader