编写自定义 webpack 解析器

我计划使用一组更复杂的约定来将资源导入到我的 webpack 项目中。所以我正在尝试编写一个插件，该插件应该重写请求的模块定位器的部分，然后将其传递给解析器瀑布 https://webpack.js.org/development/how-to-write-a-plugin/#different-plugin-shapes.

假设我们只想

• 检查请求的模块是否以#性格和
• 如果是这样，请将其替换为./lib/。现在应该由默认解析器查找新的模块定位器。

这意味着当一个文件/var/www/source.js does require("#example")，然后它实际上应该得到/var/www/lib/example.js.

到目前为止我已经发现我显然应该使用the module事件挂钩 https://webpack.js.org/api/plugins/resolver/#module-request-request-async-waterfall以此目的。这也是选择的方式通过其他答案 https://stackoverflow.com/a/29859165/2048874不幸的是这并没有给我太大帮助。

这是我对自定义解析插件的看法，非常简单：

function MyResolver () {}
MyResolver.prototype.apply = function (compiler) {

  compiler.plugin('module', function (init, callback) {
    // Check if rewrite is necessary
    if (init.request.startsWith('#')) {

      // Create a new payload
      const modified = Object.assign({}, init, {
        request: './lib/' + init.request.slice(1)
      })

      // Continue the waterfall with modified payload
      callback(null, modified)
    } else {

      // Continue the waterfall with original payload
      callback(null, init)
    }
  })

}

然而，使用这个（在resolve.plugins）不起作用。运行 webpack 时，出现以下错误：

ERROR in .
Module build failed: Error: EISDIR: illegal operation on a directory, read
 @ ./source.js 1:0-30

显然，这不是做事的方式。但由于我找不到太多关于这个问题的示例材料，所以我有点没有想法。

为了使重现更容易，我已将此精确配置放入 GitHub 存储库中。因此，如果您有兴趣提供帮助，您可以获取它：

git clone https://github.com/Loilo/webpack-custom-resolver.git

然后运行npm install and npm run webpack查看错误。

Update:请注意，webpack 4 中的插件架构发生了显着变化。下面的代码将不再适用于当前的 webpack 版本。

如果您对 webpack 4 兼容版本感兴趣，请发表评论，我会将其添加到此答案中。

我找到了解决方案，主要是通过读取小doResolve() line 在文档中 https://webpack.js.org/api/plugins/resolver.

该解决方案是一个多步骤过程：

1. 跑步callback()不足以继续瀑布。

为了将解决任务传递回 webpack，我需要替换

callback(null, modified)

with

this.doResolve(
  'resolve',
  modified,
  `Looking up ${modified.request}`,
  callback
)

(2.修复webpack文档)

文档缺少第三个参数（message） 的doResolve()方法，导致使用此处所示的代码时出错。这就是为什么我放弃了doResolve()当我在提出问题之前找到它时的方法。

我已经提出了拉取请求，文档应该很快就会修复。

3.不要使用Object.assign()

看来原来的请求对象（名为init在问题中）不得通过重复Object.assign()传递给解析器。

显然，它包含欺骗解析器查找错误路径的内部信息。

所以这一行

const modified = Object.assign({}, init, {
  request: './lib/' + init.request.slice(1)
})

需要替换为：

const modified = {
  path: init.path,
  request: './lib/' + init.request.slice(1),
  query: init.query,
  directory: init.directory
}

就是这样。为了看得更清楚一点，这是整个MyResolver上面的插件现在可以使用提到的修改：

function MyResolver () {}
MyResolver.prototype.apply = function (compiler) {

  compiler.plugin('module', function (init, callback) {
    // Check if rewrite is necessary
    if (init.request.startsWith('#')) {

      // Create a new payload
      const modified = {
        path: init.path,
        request: './lib/' + init.request.slice(1),
        query: init.query,
        directory: init.directory
      }

      // Continue the waterfall with modified payload
      this.doResolve(
        // "resolve" just re-runs the whole resolving of this module,
        // but this time with our modified request.
        'resolve',
        modified,
        `Looking up ${modified.request}`,
        callback
      )
    } else {
      this.doResolve(
        // Using "resolve" here would cause an infinite recursion,
        // use an array of the possibilities instead.
        [ 'module', 'file', 'directory' ],
        modified,
        `Looking up ${init.request}`,
        callback
      )
    }
  })

}