我们一直在使用HtmlWebpackInlineSourcePlugin
没有问题,但不再受支持,因此我们转向InlineChunkHtmlPlugin
这对 JS 很有用,但拒绝捕获输出style.css
文件并将其内联,这样我们就没有样式了。
有没有某种方法可以内联 CSS 而无需构建粗糙的自定义解决方案?
有很多与我类似的问题,但我找到的所有答案都依赖于现在未维护的HtmlWebpackInlineSourcePlugin
plugin.
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
module.exports = {
// ... our other configuration options, loaders, etc
plugins: [
new CleanWebpackPlugin(pathsToClean),
new MiniCssExtractPlugin({
filename: 'style.css',
}),
new HtmlWebpackPlugin({
template: './template.html',
// inject: 'body',
inject: true,
filename: './output.html',
inlineSource: '.(js|css)$',
chunks: ['chunk'],
}),
// new HtmlWebpackInlineSourcePlugin(); // Used to work for loading JS & CSS
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/.*/]); // Only loads JS, no CSS -- https://openbase.io/js/react-dev-utils
],
}