loader 用于对模块的源代码进行转换。可以在你 'import' 或 '加载' 进行预处理。

使用loader的三种方法

• 配置（推荐）：在 webpack.config.js 文件中指定 loader。
• 内联：在每个 import 语句中显式指定 loader。
• CLI：在 shell 命令中指定它们。

1.配置

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

2.内联

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

使用 ! 将资源中的 loader 分开。分开的每个部分都相对于当前目录解析。

3.cli

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

loader 的特性

• loader 支持链式传递。能够对资源使用流水线(pipeline)。一组链式的 loader 将按照相反的顺序执行。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript。
• loader 可以是同步的，也可以是异步的。
• loader 运行在 Node.js 中，并且能够执行任何可能的操作。
• loader 接收查询参数。用于对 loader 传递配置。
• loader 也能够使用 options 对象进行配置。
• 除了使用 package.json 常见的 main 属性，还可以将普通的 npm 模块导出为 loader，做法是在 package.json 里定义一个 loader 字段。
• 插件(plugin)可以为 loader 带来更多特性。
• loader 能够产生额外的任意文件。

常用loader

文件

• url-loader 像 file loader 一样工作，但如果文件小于限制，可以返回 data URL
• file-loader 将文件发送到输出文件夹，并返回（相对）URL

JSON

• json-loader 加载 JSON 文件（默认包含）
• json5-loader 加载和转译 JSON 5 文件

转换编译

• script-loader 在全局上下文中执行一次 JavaScript 文件（如在 script 标签），不需要解析
• babel-loader 加载 ES2015+ 代码，然后使用 Babel 转译为 ES5
• ts-loader 或 awesome-typescript-loader 像 JavaScript 一样加载 TypeScript 2.0+

模板

• markdown-loader 将 Markdown 转译为 HTML
• html-loader 导出 HTML 为字符串，需要引用静态资源

样式

• style-loader 将模块的导出作为样式添加到 DOM 中
• css-loader 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码
• less-loader 加载和转译 LESS 文件
• sass-loader 加载和转译 SASS/SCSS 文件
• postcss-loader 使用 PostCSS 加载和转译 CSS/SSS 文件 (添加浏览器前缀，压缩 CSS)
• stylus-loader 加载和转译 Stylus 文件

清理和测试

• eslint-loader PreLoader，使用 ESLint 清理代码
• jshint-loader PreLoader，使用 JSHint 清理代码

框架

• vue-loader 加载和转译 Vue 组件
• polymer-loader 使用选择预处理器(preprocessor)处理，并且 require() 类似一等模块(first-class)的 Web 组件
• angular2-template-loader 加载和转译 Angular 组件

如何创建一个loader

1. 在已有环境下安装

//webpack提供的工具库
npm i loader-utils -S

2. 创建loader文件夹 创建你需要的文件，例：loaders/replaceLoader.js
3. 引入loader-utils函数，实现自己的方法并且导出

const loaderUtils = require('loader-utils');
//source 源码
module.exports = function (source) {
  const options = loaderUtils.getOptions(this);// 用户传入的options
  const result = source.replace('world', options.name);//执行方法
  return result;//返回结果
}

4.在webpack-.config.js引入

  module: {
    rules: [{
      test: /.js$/,
      use: {
        loader: path.resolve(__dirname, './loaders/replaceLoader.js'),
        options: {
          name: 'echo'
        }
      }
    }]
  }

如何创建一个loader可以参考：

• webpack-loader
• 知乎