我可以在 React App 中访问带有由 MiniCssExtractPlugin 创建的内容哈希的 css 文件名吗？

Question

我正在尝试使用 Shadow dom 在 React 组件内动态加载链接标签，但我找不到使用 MiniCssExtractPlugin/Webpack 生成的哈希值访问文件名/路径的解决方案。

总体思路是有两个以上的 CSS 输出。第一个全局的和其他的用于“shadow dom”隔离。

我已经尝试使用文件名设置环境变量，但它似乎是异步操作。我的环境 REACT_APP_CSS 未定义。

// as example
      new MiniCssExtractPlugin({
        filename: ({ chunk }) => {
          // REACT_APP_CSS it is some global variable
          REACT_APP_CSS = `${chunk.name}.${chunk.hash}.css`;
          return `${assetName}.css`;
        }
      }),
    new webpack.DefinePlugin({
        "process.env": JSON.stringify({
          REACT_APP_CSS: REACT_APP_CSS
        })
      }),

您知道我可以做什么来在运行时访问文件名/路径吗？任何同步解决方案都会很棒。

示例组件

import root from "react-shadow";
[..]
  return (
  <root.span>
      <link href={myCssPathToBuild} rel="stylesheet" />
    [..]
  </root.span>
)

希望您能有所帮助。

Answer 1

我找到了解决方案。它并不完美，但它“有效”。

要访问块路径，您可以：

使用assets-webpack-plugin

  new AssetsPlugin({
        filename: "assets.js",
        processOutput: function (assets) {
          return "window.staticMap = " + JSON.stringify(assets);
        }
      }),

它创建一个包含块名称和路径对的映射/对象。使用 AssetPlugin，您可以使用 ext 指定输出和文件名。在给定的示例中，我创建了 js 文件，该文件设置包含资产映射的全局变量。

为了在运行时访问 window.staticMap，我在公共 HTML 中包含了

以我的愚见，访问块路径应该容易得多。
如果您有其他/更好的解决方案，请分享。