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

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添加一个require，然后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'});
    }
});