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 をよろしくお願いいたします。

以下もご興味があるかもしれません: