WebpackはCSSファイルを読み込み、その設定方法

webpackはCSSファイルとその設定をロードします

複数の CSS ファイルを作成した後、HTML でそれらを参照する場合、最初の方法は、link タグを介して CSS ファイルをインポートすることです。ただし、CSS ファイルの数が多い場合は、1 つずつインポートすることはお勧めできません。webpack を学習したので、bundle.js ファイルをパッケージ化して、すべての依存ファイルをインポートしたいと思います。
知っておく必要があるのは、エントリ関数の main.js ファイルに css ファイルがインポートされていない場合、パッケージ化された bundle.js ファイルには css ファイルが確実に含まれないため、main.js ファイルを css ファイルに依存させる必要があるということです。
使用するコード: require('css file address')
依存関係が完了したら、再度パッケージ化して npm run build を実行すると、エラーが見つかります。エラー: このファイルタイプを処理するには適切なローダーが必要になる可能性があります。つまり、このファイルを処理するには適切なローダーが必要になる可能性があります。
そこで、webpack の中国語の Web サイトを開いて、インストールする必要がある 2 つのローダー (css-loader と style-loader) を見つけました。また、webpack.config.jsファイルでこれらのローダーを設定する必要があります。
そこで、npmを使用してこれら2つの依存関係をダウンロードします。コードは次のとおりです: npm install css-loader style-loader --save-dev
webpack.config.js ファイルには、オブジェクトである module プロパティがあります。このオブジェクトには、配列である rules プロパティがあります。配列内の各項目は、さまざまなファイルローダーを処理するために必要なオブジェクトです。コードは次のとおりです。

定数パス = require('path');
    モジュール.エクスポート = {
        // 設定ファイルで、エントリ ファイルとエクスポート ファイルを手動で指定します。mode:'development'、// この属性は、webpack4.x バージョンで追加する必要があります。entry:'./src/main.js'、// エントリ ファイルの出力:{ // エクスポート ファイル パス:path.resolve(__dirname,'dist')、// パッケージ化されたファイルを出力する場所を指定します (注意: パスは絶対アドレスである必要があります)
            filename: 'bundle.js' //出力ファイルのファイル名を指定します},
        モジュール:{
            ルール:[
            {test:/\.css$/ 、use:['style-loader' 、 'css-loader']}
            ]
        }
    }

テストは処理するファイルの種類を示し、使用されている各項目はその種類のファイルを処理するために必要なローダーです。

注: css-loader は main.js ファイルに css ファイルをロードさせるために使用され、style-loader はモジュールのエクスポートをスタイルとして DOM に追加するために使用されます。ここで疑問に思う人もいるかもしれません。この関数によれば、ファイルは最初に読み込まれ、次にスタイルとして DOM に追加される必要があるため、配列内の順序はこのようになるべきではありません。ここで、あなたの考えは間違っていないことを明確に伝えたいと思います。ただし、webpack は、配列の最後の要素から右から左にローダーをロードするという点で非常に特殊です。

依存関係を設定し、ローダーをダウンロードして構成した後、実行後に CSS ファイル内のスタイルが表示されることがわかります。

要約する

上記は、エディターが紹介した webpack 読み込み css ファイルとその設定方法です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<: Reactプロジェクトで要素を使用する方法

>>: ページネーションの例とベストプラクティス