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): テーブル タイトル

推薦する

オペレーターが知っておくべき 18 個の Nginx プロキシ キャッシュ構成のヒント (どれを知っていますか?)

アプリケーションや Web サイトのパフォーマンスが成功の重要な要素であることは誰もが知っています。...

メタタグのビューポートはデバイス画面のCSSを制御します

コードをコピーコードは次のとおりです。 <meta name="viewport&q...

CentOS7環境にMySQL5.5データベースをインストールする

目次1. 現在のシステムにMySQLがインストールされているかどうかを確認する2. インストールされ...

MySQLデータベースイベントスケジュール実行タスクの詳細な説明

1. 背景プロジェクトの業務が進むにつれて、データベース テーブルの数がどんどん大きくなり、ハードデ...

集める価値のある 15 個の JavaScript 関数

目次1. 数字を逆にする2. 配列内の最大のn個の数値を取得する3. 階乗を計算する4. 現在の動作...

MySQL 5.7 mysql コマンドラインクライアントの使用コマンドの詳細

MySQL 5.7コマンドを使用するMySQLコマンドラインクライアント1. パスワードを入力してく...

mysql-canal-rabbitmq のインストールと展開の非常に詳細なチュートリアル

目次1.1. MySQL binlog を有効にする1.2. RabbitMQ の交換とキューを構成...

Linux netfilter/iptables の知識ポイントの詳細な説明

ネットフィルターNetfilter は、パケット フィルタリング、転送、およびアドレス変換 NAT ...

Vueはカウントダウン機能を実装する

この記事の例では、カウントダウン機能を実装するためのVueの具体的なコードを参考までに共有しています...

MySQL 5.7.20\5.7.21 無料インストール版のインストールと設定のチュートリアル

参考までに、mysql 5.7.20 / 5.7.21 をダウンロード、インストール、構成します。具...

タブバーの切り替え効果を実現するJavaScript

タブバー: 異なるタブをクリックすると異なるコンテンツが表示され、クリックしたタブのスタイルが変更さ...

Vue の自動書式設定の改行保存の詳細な説明

ネットで変更方法をいろいろ調べたのですが、うまくいきませんでした。後で大物から見て削除しました。フォ...

Vue+Bootstrapでシンプルな学生管理システムを実現

参考までに、vueとbootstrapを使って比較的シンプルな生徒管理システムを作りました。具体的な...

Mybatis ファジークエリ実装方法

Mybatis ファジークエリ実装方法mybatis のリバース アシスタントは非常に使いやすく、通...

CentOS7.5 の MySQL8.0.19 のインストールチュートリアルの詳細な手順

1. はじめにこの記事には MySQL インストール部分のスクリーンショットがないので、ある程度の基...