是否可以让 html-webpack-plugin 从 css 生成 <style> 元素？

Posted 2023-02-22

技术标签:

【中文标题】是否可以让 html-webpack-plugin 从 css 生成 <style> 元素？【英文标题】：Is it possible to have html-webpack-plugin generate <style> elements from css? 【发布时间】：2018-11-18 23:35:40 【问题描述】：

我有一个使用 Vue 和 Webpack 的静态站点。

我在一个名为 style.css 的文件中有一些全局 CSS 规则，我正在使用我的 index.js 文件中的 import './styles.css' 导入它们。此外，我还有一些 .vue 文件可以生成自己的 CSS。

为了生成 html 页面，我使用的是html-webpack-plugin。

我的 CSS 规则似乎可以正确应用。但是，包含它们的 <style> 标签正在通过 Webpack 生成的 javascript 动态添加到我的页面的 <head> 中。我希望这些<style> 标记静态出现在生成的index.html 文件中。有什么方法可以实现吗？

另外，如果可能的话，我希望缩小 CSS。

这是我的 webpack 配置文件：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = 
  entry: './index.js',
  output: 
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  ,
  plugins: [
    new HtmlWebpackPlugin(
      template: './index.html',
    ),
    new VueLoaderPlugin()
  ],
  module: 
    rules: [
      
        test: /\.vue$/,
        loader: 'vue-loader'
      ,
      
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      
    ]
  ,
  mode: 'development'
;

【问题讨论】：

我想说这是一个不常见的用例。对于开发，动态样式元素很好。通常在生产中，使用一个单独的、缩小的 CSS 文件。为什么需要 HTML 文件中的缩小 CSS？我希望它会减少网站的加载时间。优化您的网站固然很棒，但如果您还没有真正衡量过问题，我建议您不要过早优化！无论如何，动态注入的样式对于大多数较小的网站来说都很好。如果您关心加载时间，您应该对大多数资产使用长期缓存，但您永远不希望用户缓存 index.html。在这种方法中，您希望 index.html 尽可能小。 【参考方案1】：

听起来像是这些 html-webpack 插件的确切用例：

html-webpack-inline-source-plugin: