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

Question

我有一个使用 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'
};

Answer 1

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

html-webpack-inline-source-plugin:

It allows you to embed javascript and css source inline.
style-ext-html-webpack-plugin：前一个的替代。

If you use HtmlWebpackPlugin and ExtractTextPlugin in your Webpack builds to create HTML <link>s to external stylesheet files, add this plugin to convert the links to `~ elements containing internal (sometimes incorrectly called 'in-line') CSS.
html-inline-css-webpack-plugin: style-ext-html-webpack-plugin.
的替代品

Convert external style sheet(<link rel="stylesheet"/>) to internal style sheet(<style>...<style/>). Require mini-css-extract-plugin and html-webpack-plugin

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

Extract Text Plugin:

Extract text from a bundle, or bundles, into a separate file. [...] It moves all the required *.css modules in entry chunks into a separate CSS file. So your styles are no longer inlined into the JS bundle, but in a separate CSS file (styles.css).
mini-css-extract-plugin：与提取文本插件相同，但适用于 webpack v4.

This plugin extracts CSS into separate files.

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

Is it possible to have html-webpack-plugin generate <style> elements from css?

javascript

css

webpack

vue.js

html-webpack-plugin