Question

我们的应用程序有多个入口点（比如A和B）。我们需要的是获取入口点A的生成名称并在模块B中使用它。入口点A的名称必须包含哈希。是否可以通过webpack配置和一些加载器/插件来实现它？

Answer 1

我的解决方案是编写自己的插件，在可以从统计信息中获取文件名的情况下修改after-emit阶段的文件：

const replace = require("replace-in-file");
const path = require('path');

function PlaceholderToAssetReplacerPlugin(options) {
  this.options = options;
}

PlaceholderToAssetReplacerPlugin.prototype.apply = function (compiler) {
  const self = this;

  compiler.plugin('after-emit', function (compilation, callback) {
    const stats = compilation.getStats().toJson({
      hash: false,
      publicPath: true,
      assets: true,
      chunks: false,
      modules: false,
      source: false,
      errorDetails: false,
      timings: false
    });

    const assetsByChunkName = stats.assetsByChunkName;
    replace({
      files: path.join(__dirname, self.options.path, assetsByChunkName[self.options.sourceChunkName]),
      replace: new RegExp(self.options.variable),
      with: `"${assetsByChunkName[self.options.destinationChunkName]}"`
    }, (err, changedFiles) => {
      if (err) {
        throw err;
      }
      callback();
    });
  });
};

module.exports = PlaceholderToAssetReplacerPlugin;

然后像这样使用它：

new PlaceholderToAssetReplacerPlugin({
  path: '../dist/static',
  sourceChunkName: 'embedApiLoader',
  destinationChunkName: 'embedApi',
  variable: '__EMBED_API_ASSET__'
})

如何使用webpack获取另一个模块中的模块入口路径？

1 个答案: