css-loaderはwebpackで何をしますか？

Question

公式のwebapckのドキュメントによると、webpackは、指定されたCSSファイルをcss-loaderというローダーを使用してJavaScriptモジュールにインポートします。

このプロセスにはどのような利点がありますか？リンクタグを使ってHTMLファイルにCSSファイルをリンクする古い学校の方法にどうやって行くことができますか？

Answer 1

私はあなたにCSSのリンクが不可能なシナリオの良い例を挙げます。

ASP.NET Core MVCアプリケーションを開発していて、node_modulesフォルダからいくつかのCSSを使用する場合は、そのフォルダへのパスを解決できません。これは、ASP.NETがwwwrootディレクトリのファイルのみを処理するためです。

そのため、webpackのようなビルドシステムが必要です。

webpackのCSSローダーでは、エントリとして提供されたjs/tsファイルのすべてのCSSリファレンスをチェックし、出力ディレクトリ（通常はwwwroot内）に別のCSSファイルを生成します。 この例を見てみましょう：

entry: { 
vendor: [ 
    '@angular/animations', 
    '@angular/cdk', 
    '@angular/material', 
    '@angular/common', 
    '@angular/compiler', 
    '@angular/core', 
    '@angular/flex-layout', 
    '@angular/forms', 
    '@angular/http', 
    '@angular/platform-browser', 
    '@angular/platform-browser-dynamic', 
    '@angular/router', 
    '@angular/material/prebuilt-themes/pink-bluegrey.css', 
    'es6-shim', 
    'es6-promise', 
    'event-source-polyfill', 
    'jquery', 
    'zone.js', 
    'jwt-decode' 
]} 

は、ここで私は角素材のテーマのCSSを追加しました。 cssはベンダのjs/tsバンドルの内側にあることに注意してください。 cssローダーはそこからcssを抽出し、バンドルと同じ名前のcssファイルを生成します。生成されたファイルはwwwrootフォルダに置かれ、index.htmlで参照するファイルになります（この例のようなSPAアプリケーションと仮定します）。

もちろん、node_modulesフォルダからcssファイルをコピーし、wwwrootディレクトリに置いてリンクすることができます。しかし、そのアプローチは脆弱です。なぜなら、CSSの別のバージョンが利用可能で、あなたが最新のバージョンを望んでいないときは、パッケージを更新して、ファイルをもう一度コピーする必要があるからです。それで、なぜそれを自動化しないのですか？