web-dev-qa-db-ja.com

html-webpack-pluginにcssから<style>要素を生成させることは可能ですか？

VueおよびWebpackを使用している静的サイトがあります。

style.cssというファイルにいくつかのグローバルCSSルールがあり、import './styles.css'ファイルからindex.jsを使用してそれらをインポートしています。さらに、独自のCSSを生成するいくつかの.vueファイルがあります。

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'
};
javascriptcsswebpackvue.jshtml-webpack-plugin
5
Adrian

これらの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プラグインに依存しています。

  • テキストプラグインの抽出 ：

    バンドルからテキストを個別のファイルに抽出します。 [...]必要なものをすべて移動します*.cssモジュールを別のCSSファイルにエントリチャンクに入れます。そのため、スタイルはJSバンドルにインライン化されず、別個のCSSファイル（styles.css）。

  • mini-css-extract-plugin ：Extract Text Pluginと同じですが、webpack v4用です。

    このプラグインは、CSSを個別のファイルに抽出します。

6
ghybs