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

【问题标题】：Is it possible to have html-webpack-plugin generate <style> elements from css?是否可以让 html-webpack-plugin 从 css 生成 <style> 元素？
【发布时间】：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 尽可能小。

标签： javascript css webpack vue.js html-webpack-plugin

【解决方案1】：

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

html-webpack-inline-source-plugin:

它允许您嵌入 javascript 和 css 源代码。
style-ext-html-webpack-plugin：前一个的替代方案。

如果您在 Webpack 构建中使用 HtmlWebpackPlugin 和 ExtractTextPlugin 来创建 HTML <link>s 到外部样式表文件，请添加此插件以将链接转换为包含内部（有时被错误地称为“行内”）CSS 的 `~ 元素。
html-inline-css-webpack-plugin：style-ext-html-webpack-plugin 的替代品。

将外部样式表(<link rel="stylesheet"/>) 转换为内部样式表(<style>...<style/>)。需要 mini-css-extract-plugin 和 html-webpack-plugin

最后 2 个 HTML webpack 插件依赖于以下 webpack 插件之一：

Extract Text Plugin:

从一个或多个包中提取文本到一个单独的文件中。 [...] 它将入口块中所有必需的 *.css 模块移动到单独的 CSS 文件中。因此，您的样式不再内联到 JS 包中，而是在单独的 CSS 文件 (styles.css) 中。
mini-css-extract-plugin: 与 Extract Text Plugin 相同，但适用于 webpack v4。

此插件将 CSS 提取到单独的文件中。

【讨论】：