javascript - 使用 webpack 进行初始构建时的 Criticalcss 失败

Question

所以我使用 Webpack 来捆绑我的 js 和 css。

我添加了 Webpack-plugin-critical 以输出具有关键样式的外部 css 文件。该文件被添加到我的（树枝）模板中。

如果我第二次运行 Webpack，它会正常工作，尽管初始构建失败并且我收到一条错误消息，说它找不到主要生成的 css 文件。如何将 ExtractTextPlugin 的主 css 文件输出公开给 Webpack-plugin-critical 允许它在初始构建时使用该文件并生成一个关键 css 文件？

Answer 1

我认为这是不可能的。

https://github.com/nrwl/webpack-plugin-critical/blob/master/src/critical.ts#L129

你可以看到 webpack-plugin-critical 使用了事件钩子“emit”哪些资产文件还没有被 webpack 编译器生成。

另一方面，我建议您可以使用其他独立的 webpack 配置来专门生成关键的 css。

Answer 2

对于任何坚持这一点的人。使用这个插件；https://www.npmjs.com/package/html-critical-webpack-plugin

它在 sass 编译后构建关键样式。