Question

我正在编写一个自定义的Webpack插件，该插件应该修改一些TypeScript源文件，因此，文件之间的依赖关系可能会发生变化（例如，可以添加或删除对文件的导入，以及导入可以由另一个导入替换）。我遇到了Webpack没有找到文件之间新关系的问题。到目前为止我得到的最好的结果是，我可以让它了解一些文件更改，但在编译的生命周期中似乎为时已晚，因此文件内容可能是过时。这是我到目前为止的简化。我相信确定newFiles和hasDependencyOnFile的逻辑是正确的：

class CustomWebpackPlugin {
  apply(compiler) {
    compiler.plugin('after-compile', (compilation, callback) => {
      compilation.fileDependencies.push(...newFiles);

      compilation.modules.forEach(module => {
        if (hasDependencyOnFile(module.resource)) {
          module.fileDependencies.push(...newFiles);
        }
      });

      callback();
    });
  }
}

这是将新条目添加到依赖关系图中的正确方法吗？或者Webpack是否提供了正确执行此操作的API？

Answer 1

我有一个类似的问题需要解决。我尝试在编译阶段注入依赖项，但是还有其他依赖项和上下文无法很快解决。因此，我只是通过添加新的加载器来更新源代码。在此加载程序中，我使用JavaScript解析器获取所需的信息，然后创建import / require语句的前缀。此前缀被添加到我的旧代码的开头，该代码没有任何此类导入/要求依赖项。

以下是Webpack加载程序的示例代码。

使用import语句将在编译的JavaScript中强制执行严格模式。使用require不会启用严格模式，这对遗留代码很有用。

module.exports = function(source) {
  // parseDependencies is a function created to parse the source code and create the right import file path based on the file path level input parameter.

  let filePath = this._module.userRequest;
  let subPath = filePath.substring(process.cwd().length, filePath.length)
  let level = (subPath.match(/\//g) || []).length - 5;

  let importList = parseDependencies(source, level).map(f => {
    ...
  });
  return importList.join("\r\n") + source;
}

Answer 2

将文件添加为其他文件的依赖关系是不够的，您需要“其他文件”需要添加的文件，因此，我的建议是使用normal-module-loader阶段来添加您的文件自定义加载器会向您newFile添加一个需求，然后webpack会将newFile添加为当前dep。

示例代码：

compilation.plugin('normal-module-loader', (loaderContext, module) => {
    // this will be called for every successfully built module, but before it's parsed and
    // its dependencies are built. The built source is available as module._source.source()
    if (...some condition on the module) {
      module.loaders.push({loader: compiler.context+'/path/to/custom-loader.js'});
    }
});

在自定义Webpack插件中添加新文件依赖项

2 个答案: