exports-loader

exports loader 是 Webpack 官方提供的一个 loader 工具，主要目的是转化已有的 JavaScript 库文件，方便以 import / require 的形式引入到代码中。

在实际的开发过程中，有时会遇到这样的情况：

• 需要使用的库没有提供 npm 的包，只提供了一个可执行的 JavaScript 文件（比如 FoamTree）；
• 或者为了避免重复的编译工作，希望可以直接用 npm 包中现成的打包后产物。比如 @sentry/browser 使用中除了常规的 dist/index.js 及一众文件外，build/bundle.min.js 提供了打包后的结果。因为打包不涉及对库文件的修改，直接使用打包后的产物显然会更快一些（类似 Webpack DLL 的操作）。

然而，上面的情况都有一个共性的问题：这些打包的产物本意是给 Web 直接引用的。因此，“导出”的方式是在 window 上直接绑定对象，而不是通过 module.exports 或其他类似方式导出。比如，FoamTree 就会在 window 上绑定一个 CarrotSearchFoamTree 对象。

exports loader 就是为了这种情况设计的。

官方的文档可以查看这里。简单来说，通过下面的方式，就可以将 FoamTree 引入了：

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /carrotsearch\.foamtree/u,
        loader: 'exports-loader?CarrotSearchFoamTree'
      },
      // ...
    ],
  },
  resolve: {
    modules: [
      // foamtree 的文件存放在 vendor 目录下，使用时效果等价于 node_modules
      // 但因为 foamtree 本身不提供 npm 包，因此这里只能手动存放，再配置查找路径
      'path-to-vendor-folder',
      'node_modules'
    ],
    // ...
  },
}

配置完成后，项目中，可以直接这么使用：

import FoamTree from 'carrotsearch.foamtree';

exports loader 的操作，就是在原先 FoamTree 的最后，加上一句：

module.exports = CarrotSearchFoamTree;

这里 CarrotSearchFoamTree 是 FoamTree 文件在 window 注入的对象。如果能导出多个变量，也可以进行配置：

require('exports-loader?file,parse=helpers.parse!./file.js');
// 添加如下代码：
//  exports['file'] = file;
//  exports['parse'] = helpers.parse;