reactjs - webpack 和多个asset-manifest.json 文件

我在这个 javascript 世界中很陌生,所以我的想法可能有些错误。

我在一个 react 项目中有更多应用程序,这些应用程序是一次构建的。由于缓存问题,我想介绍 javascript 文件的散列。因此我需要多个asset-manifest.json 文件。

我认为 webpack-assets-manifest 插件可以完成这项工作。但是,玩了一段时间后,我没有找到如何正确生成多个asset-manifest.json 文件的方法。我找不到一些例子。

  1. webpack-assets-manifest 插件是正确的插件吗?
  2. 解决此类问题的其他可能性是什么?

(我正在使用 webpack 5.x)

回答1

所以没有人想回答我的问题,所以我必须这样做:) 我用 webpack-assets-manifest 插件解决了这个问题。所需 manifest.json 文件的结构是

{
  "files": {
    "private.js": "private/private-aab89d6bb658b9b19760.js",
    "private/index.html": "private/index.html",
  },
  "entrypoints": [
    "private/private-aab89d6bb658b9b19760.js"
  ]
}

这是方法(config-overrides.js),它可以做到这一点:

function addManifestJsonFile(config, outputJsonFile, customerType) {
  const manifest = new WebpackAssetsManifest({
    output: outputJsonFile,
    customize: ({ key, value }) => {
      if (key.toLowerCase().endsWith('.txt')) return false;
      if (!key.toLowerCase().includes(customerType)) return false;
      return { key, value };
    },
    transform(assets) {
      return {
        files: assets,
        entrypoints: [assets[customerType + '.js']]
      };
    }
  });
  config.plugins.push(manifest);
}

相似文章

twilio - DevTools 无法加载源 map

我知道Chrome开发工具中有很多关于这些警告的帖子。对于所有这些,解决方案是关闭通知“启用javascript源maps”和“启用CSS源maps”。我想知道的是如何解决这个问题,以及导致这些警告的...

随机推荐

最新文章