webpack 中的 loader 是什么

1. 一个引入图片模块的案例

// index.js
import doggy from 'doggy.jpg'
const kitty = require('kitty.jpg')

执行命令，结果是没有打包成功的，终端输出以下的错误：

ERROR in ./src/cat.jpg 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loader                                            s are configured to process this file. See https://webpack.js.org/concepts#loade                                            rs
(Source code omitted for this binary file)
 @ ./src/index.js 6:12-32

ERROR in ./src/doggy.jpg 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loader                                            s are configured to process this file. See https://webpack.js.org/concepts#loade                                            rs
(Source code omitted for this binary file)
 @ ./src/index.js 5:0-31 8:12-17

那是因为，webpack 默认只支持打包 Javascript 模块，比如 import m1 from 'm1.js'，而对于引入了图片模块，webpack 并不知道该如何处理，因此在打包的时候就报错了。

2. 使用 loader

对于上述打包图片资源报错的问题，可以通过设置 module 配置项使用 loader 来解决。

module.exports = {
  // 省略其他配置项
  module: {
    rules: [{
      test: /\.jpg$/,
      use: {
        loader: 'file-loader'
      }
    }]
  }
}

可以看到，我们使用了 file-loader，再次打包，输出信息如下：

Hash: b214eba26b37ad1342b7
Version: webpack 4.40.2
Time: 182ms
Built at: 2019-09-22 11:02:18
                               Asset      Size  Chunks             Chunk Names
11e15173d7f38a223d340822e4364ddb.jpg  7.43 KiB          [emitted]
b46911807fa4ee30cf3bf65a135625a5.jpg  4.92 KiB          [emitted]
                             main.js  5.61 KiB    main  [emitted]  main
Entrypoint main = main.js
[./src/cat.jpg] 82 bytes {main} [built]
[./src/doggy.jpg] 82 bytes {main} [built]
[./src/index.js] 142 bytes {main} [built]

项目目录下生成了一个 dist 文件夹，里面包含了 main.js 和两张图片（11e15173d7f38a223d340822e4364ddb.jpg 和 b46911807fa4ee30cf3bf65a135625a5.jpg）。

3. loader 是什么

综上，loader 提供了打包方案，当 webpack 不知道该如何打包图片模块、CSS 模块或者其他非 Javascript 模块的时候，可以使用各式各样 loader 来帮助 webpack 打包这些模块。

使用 loader 的三种方式：

• 配置（推荐）：在 webpack.config.js 文件中指定 loader，如上述例子。
• 内联：在每个 import 语句中显式指定 loader，import Styles from 'style-loader!css-loader?modules!./styles.css';。
• CLI：在 shell 命令中指定它们，webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'。

更多信息参考 Loaders