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

'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);

定数パス = 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]'
                 }
             }],
     },
};

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

定数パス = 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]'
                 }
             }],
     },
};

定数パス = 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]'
                 }
             }],
     }
};