webpackでCSSを分割・圧縮し、リンクでインポートする手順

webpackでCSSを分割・圧縮し、リンクでインポートする手順

まずコードファイルの構造を見てみましょう。

エントリファイル (index1.js) の内容:

'jquery' から $ をインポートします
'./css/index.css' をインポートします
'./less/index.less' をインポートします
$(関数() {
    $('#app li:nth-child(odd)').css('color', 'red')
    $('#app li:nth-child(even)').css('color', 'green')
})
 
'./assets/fonts/iconfont.css' をインポートします。
定数ul = document.querySelector("ul");
定数 theI = document.createElement("li");
theI.className='アイコンフォント icon-qq';
ul.appendChild(theI);

webpack.config.js 構成ファイルの内容:

定数パス = require('path');
HtmlWebpackPlugin は 'html-webpack-plugin' を必要とします。
モジュール.エクスポート = {
    //エントリ ファイル アドレス エントリ: './src/index1.js',
    出力: {
        パス: path.resolve(__dirname, 'dist'),
        //エクスポートファイル名 filename: 'bundle.js',
    },
    プラグイン: [
        新しいHtmlWebpackプラグイン({
        テンプレート: './public/interlaced color.html'
    })],
     モジュール: {
         ルール: [{
             //.cssで終わるファイルに一致します。iは大文字と小文字を区別しません。テスト: [/\.css$/i],
            // 右から左に実行します。順序は変更できません。style-loader は CSS を DOM に挿入し、css-loader は @import と url() を処理します。これは js が import/require() を解析するのと同じです。use: ["style-loader", "css-loader"],
         }, {
             テスト: /\.less$/i,
                 使用: [
                     // LessをCSSにコンパイルする
                     'スタイルローダー'、
                     'css-loader',
                     「ローダーレス」、
                 ]、
             }, { // webpack5 はデフォルトではこれらのファイルを認識しないので、静的リソースとして出力します test: /\.(eot|svg|ttf|woff|woff2)$/,
                 タイプ: '資産/リソース'、
                 ジェネレータ: {
                     ファイル名: 'font/[name].[hash:6][ext]'
                 }
             }],
     },
};

パッケージ化してから、パッケージ化された HTML ファイルを実行します。

CSSスタイルは、jsによって生成されたスタイルタグの形式で追加されていることがわかります。

パッケージを実行すると、lessがcssファイルに変換されますが、cssファイルはjsを通じてスタイルタグで追加されます。次に、cssを分割し、リンクタグで導入します。

ステップ:

1. mini-css-extract-pluginをインストールする

npm i mini-css-extract-plugin -D //npm インストール yarn add mini-css-extract-plugin -D //yarn インストール

2. webpack.config.jsファイルで導入して設定する

定数パス = require('path');
HtmlWebpackPlugin は 'html-webpack-plugin' を必要とします。
//インストールされた mini-css-extract-plugin を導入する
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
モジュール.エクスポート = {
    //エントリ ファイル アドレス エントリ: './src/index1.js',
    出力: {
        パス: path.resolve(__dirname, 'dist'),
        //エクスポートファイル名 filename: 'bundle.js',
    },
    プラグイン: [新しい MiniCssExtractPlugin(),
        新しいHtmlWebpackプラグイン({
        テンプレート: './public/interlaced color.html'
    })],
     モジュール: {
         ルール: [{
             //.cssで終わるファイルに一致します。iは大文字と小文字を区別しません。テスト: [/\.css$/i],
            // 右から左に実行します。順序は変更できません。Style-loader は CSS を DOM に挿入し、css-loader は @import と url() を処理します。これは js が import/require() を解析するのと同じです。use: [MiniCssExtractPlugin.loader, "css-loader"
             ]、
         }, {
             テスト: /\.less$/i,
                 使用: [
                     // LessをCSSにコンパイルする
                     MiniCssExtractPlugin.loader、
                     'css-loader',
                     「ローダーレス」、
                 ]、
             }, { // webpack5 はデフォルトではこれらのファイルを認識しないので、静的リソースとして出力します test: /\.(eot|svg|ttf|woff|woff2)$/,
                 タイプ: '資産/リソース'、
                 ジェネレータ: {
                     ファイル名: 'font/[name].[hash:6][ext]'
                 }
             }],
     },
};

知らせ:

  • HtmlWebpackPlugin は、リンクの形式でパッケージ化された HTML ページに CSS ファイルを導入します。
  • 使用設定項目は右から左へです。
  • css と less を使用する場合、つまり use 構成項目では、MiniCssExtractPlugin.loader を css-loader の後、style-loader の前に配置してはなりません。これは、js が import/require() を解析するのと同じように、css-loader と less-loader が @import と url() を処理するためです (その後に配置すると、解析前に分割することと同じになり、エラーが発生します)。スタイル ローダーは CSS を DOM に挿入します (その前に配置すると、CSS を DOM に挿入してから分割するのと同じになり、エラーが発生します)。

3. 分割されたCSSファイルを圧縮する

  • optimize-css-assets-webpack-plugin をダウンロード
  • webpack.config.js ファイルをインポートして構成する
定数パス = require('path');
HtmlWebpackPlugin は 'html-webpack-plugin' を必要とします。
//インストールされた mini-css-extract-plugin を導入する
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//分割を圧縮するために使用されるCSS
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
モジュール.エクスポート = {
    //エントリ ファイル アドレス エントリ: './src/index1.js',
    出力: {
        パス: path.resolve(__dirname, 'dist'),
        //エクスポートファイル名 filename: 'bundle.js',
    },
    プラグイン: [新しい MiniCssExtractPlugin()、新しい OptimizeCSSAssetsPlugin({})、
        新しいHtmlWebpackプラグイン({
        テンプレート: './public/interlaced color.html'
    })],
     モジュール: {
         ルール: [{
             //.cssで終わるファイルに一致します。iは大文字と小文字を区別しません。テスト: [/\.css$/i],
            // 右から左に実行します。順序は変更できません。Style-loader は CSS を DOM に挿入し、css-loader は @import と url() を処理します。これは js が import/require() を解析するのと同じです。use: [MiniCssExtractPlugin.loader, "css-loader"
             ]、
         }, {
             テスト: /\.less$/i,
                 使用: [
                     // LessをCSSにコンパイルする 
                     MiniCssExtractPlugin.loader、
                     'css-loader',
                     「ローダーレス」、
                 ]、
             }, { // webpack5 はデフォルトではこれらのファイルを認識しないので、静的リソースとして出力します test: /\.(eot|svg|ttf|woff|woff2)$/,
                 タイプ: '資産/リソース'、
                 ジェネレータ: {
                     ファイル名: 'font/[name].[hash:6][ext]'
                 }
             }],
     }
};

4. 包装

追加の main.css ファイルを見つけたので、Web ページを開いて表示しました。

main.css ファイルはリンクとしてインポートされ、圧縮されます。

これで、webpack による CSS の分割と圧縮、およびリンクによるインポートに関するこの記事は終了です。より関連性の高い webpack による CSS の分割と圧縮に関するコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • webpack4 css パッケージ圧縮問題の解決策
  • webpack を使用して js と css をパッケージ化して圧縮する方法の例

<<:  Dockerで複数のSpringbootを実行するための詳細なチュートリアル

>>:  HTML テーブル マークアップ チュートリアル (15): テーブル タイトル

推薦する

フロントエンドページのポップアップマスクはページのスクロールを禁止します

フロントエンド開発者がよく遭遇する問題は、ユーザーに情報を提示するためのポップアップ ウィンドウを作...

CSSの優先度を理解する2つの方法

方法1: 値を追加する公式の説明を見るには MDN にアクセスしてください。優先度はどのように計算さ...

MySQL テーブルスペースとは何ですか?

今日皆さんにお伝えしたいトピックは、「皆さんがよく話題にするテーブル スペースとは一体何でしょうか。...

Vueでシングルサインオンを実装する方法のまとめ

最近プロジェクトが中断され、RageFrame の研究は一時的に終了しました。この記事では、シングル...

HTMLからPDFへのスクリーンショット保存機能の実装

テクノロジーの活用itext.jar: バイト ファイル入力ストリームを画像、PDF などに変換しま...

Nginx サービス クイック スタート チュートリアル

目次1. Nginx の紹介1. Nginx とは何ですか? 2. Nginx を使用する理由3. ...

HTMLテーブルレイアウトの実践的な使い方の詳しい説明

テーブルはいつ使用されますか?最近では、Web ページの全体的なレイアウトにテーブルが使用されること...

vue-nuxt ログイン認証の実装

目次導入リンク始めるコードを読み進めてくださいプロキシ設定傍受を要求する異なるプレフィックスを持つイ...

JavaScript を使用したコマンドライン アプリケーションの構築

目次1. ノードをインストールする2. Commander.jsをインストールする3. JavaSc...

UbuntuのVimにNERDTreeプラグインをインストールする詳細な手順

NERDTree は Vim 用のファイル システム ブラウザーです。このプラグインを使用すると、ユ...

vue+node+socket ioは複数人のインタラクションを実現し、プロセス全体を解放します

1. 背景1. フロントエンドはvue + vuex + socket.io-clientを使用しま...

MySQL複合インデックスの概要

目次1. 背景2. 複合インデックスを理解する3. 左端一致原則4. フィールド順序の影響5. 単一...

純粋な CSS で実装された 3 つの通知バーのスクロール効果

序文通知バー コンポーネントは、比較的一般的なコンポーネントです。基本的に、すべてのサイトにこのよう...

Dockerfile を使用して Docker でイメージを構築する方法

イメージを構築するこれまで、テストやデモンストレーションにさまざまなイメージを使用しました。多くの場...

Axios の二次カプセル化の例 プロジェクトのデモ

1. なぜパッケージングを行うのですか?全体的なコード呼び出し、リクエストの公開処理、パーソナライズ...