使用 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 之后构建关键样式。