Webpack第二弹之Loader

这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战

第一弹在这里：Weboack总结第一弹

Loader介绍

webpack做的事情，仅仅是分析出各种模块的依赖关系，然后整理成资源列表，最终打包生成到指定的文件中。

上一节我们说过，在webpack内部，任何文件都是模块，不仅仅是js文件。但是在默认情况下，在遇到require和import的时候，webpack只支持对js和json文件的打包，像css、scss、jpg等这些类型的文件，webpack就无能为力了，这时候就用到了loader来对文件的内容进行解析

loader的定义：loader用于对模块的源代码进行转换，在import或加载模块时预处理文件

在加载模块时，执行顺序如下：

当webpack碰到识别不了的文件时，就会从配置中找该文件的解析规则，来看个示例：

使用 loader 告诉 webpack 加载 CSS 文件，或者将 TypeScript 转为 JavaScript。为此，首先安装相对应的 loader：

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

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

webpack.config.js

module.exports = {
  module: {
    rules: [
      // 将所有TypeScript 转为 JavaScript，
      // 也就意味着我们使用ts来开发，最终转换成js运行在浏览器端
      { test: /.ts$/, use: 'ts-loader' }
    ]
  }
};

module.rules 允许你在 webpack 配置中指定多个 loader。 这种方式是展示 loader 的一种简明方式，并且有助于使代码变得简洁和易于维护。同时让你对各个 loader 有个全局概览：

loader 从右到左（或从下到上）地取值(evaluate)/执行(execute)。在下面的示例中，从 sass-loader 开始执行，然后继续执行 css-loader，最后以 style-loader 为结束。

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

loader 特性

• loader 支持链式调用。链中的每个 loader 会将转换应用在已处理过的资源上。一组链式的 loader 将按照相反的顺序执行。链中的第一个 loader 将其结果（也就是应用过转换后的资源）传递给下一个 loader，依此类推。最后，链中的最后一个 loader，返回 webpack 所期望的 JavaScript。
• loader 可以是同步的，也可以是异步的。
• loader 运行在 Node.js 中，并且能够执行任何操作。
• loader 可以通过 options 对象配置（仍然支持使用 query 参数来设置选项，但是这种方式已被废弃）。
• 除了常见的通过 package.json 的 main 来将一个 npm 模块导出为 loader，还可以在 module.rules 中使用 loader 字段直接引用一个模块。
• 插件(plugin)可以为 loader 带来更多特性。
• loader 能够产生额外的任意文件。

可以通过 loader 的预处理函数，为 JavaScript 生态系统提供更多能力。用户现在可以更加灵活地引入细粒度逻辑，例如：压缩、打包、语言转译（或编译）

常见的Loader

文件

• val-loader 将代码作为模块执行，并将其导出为 JS 代码
• ref-loader 用于手动建立文件之间的依赖关系

JSON

• cson-loader 加载并转换 CSON 文件

语法转换

• babel-loader 使用 Babel 加载 ES2015+ 代码并将其转换为 ES5
• buble-loader 使用 Bublé 加载 ES2015+ 代码并将其转换为 ES5
• traceur-loader 使用 Traceur 加载 ES2015+ 代码并将其转换为 ES5
• ts-loader 像加载 JavaScript 一样加载 TypeScript 2.0+
• coffee-loader 像加载 JavaScript 一样加载 CoffeeScript
• fengari-loader 使用 fengari 加载 Lua 代码
• elm-webpack-loader 像加载 JavaScript 一样加载 Elm

模板

• html-loader 将 HTML 导出为字符串，需要传入静态资源的引用路径
• pug-loader 加载 Pug 和 Jade 模板并返回一个函数
• markdown-loader 将 Markdown 编译为 HTML
• react-markdown-loader 使用 markdown-parse 解析器将 Markdown 编译为 React 组件
• posthtml-loader 使用 PostHTML 加载并转换 HTML 文件
• handlebars-loader 将 Handlebars 文件编译为 HTML
• markup-inline-loader 将 SVG/MathML 文件内嵌到 HTML 中。在将图标字体或 CSS 动画应用于 SVG 时，此功能非常实用。
• twig-loader 编译 Twig 模板并返回一个函数
• remark-loader 通过 remark 加载 markdown，且支持解析内容中的图片

样式

• style-loader 将模块导出的内容作为样式并添加到 DOM 中
• css-loader 加载 CSS 文件并解析 import 的 CSS 文件，最终返回 CSS 代码
• less-loader 加载并编译 LESS 文件
• sass-loader 加载并编译 SASS/SCSS 文件
• postcss-loader 使用 PostCSS 加载并转换 CSS/SSS 文件
• stylus-loader 加载并编译 Stylus 文件

框架

• vue-loader 加载并编译 Vue 组件
• angular2-template-loader 加载并编译 Angular 组件

Awesome

有关更多第三方 loader，请参阅 awesome-webpack 中的列表。