まず結論：
1. ローダーとプラグインの違い
ローダーは「ローダー」とも呼ばれます。これは、webpack がネイティブに解析できるのは js ファイルのみであり、他の種類のファイルの場合はローダーを使用する必要があるためです。したがって、ローダーの役割は、ES6 から ES5 への変換、TypeScript から JavaScript への変換など、さまざまな形式のファイルを解析して処理し、依存関係に追加できるようにすることです。
プラグインは、私たちがよく「プラグイン」と呼ぶものです。主な目的は、webpack の機能を拡張し、追加のビルド タスクを追加することです。たとえば、パッケージ化の最適化、環境変数の挿入、ビルド速度の最適化などは、コンパイル サイクル全体
webpackを通じてさまざまなステージ (フック/ライフ サイクル)で実行されます 。webpack
2. 一般的なローダーとプラグインは何ですか?
一般的なローダー:
css-loader : CSS ファイルを JavaScript モジュールで使用できるように処理します。
CSS をロードし、モジュール化、圧縮、ファイルのインポート、その他の機能をサポートします。
style-loader : tags を使用して、解析された CSS を style ページのタグに マウントしますhead 。
babel-loader : ES6+ を ES5 に変換します。
file-loader : ファイルを出力ディレクトリにコピーし、コード内の相対パスを介して出力ファイルを参照します (画像とフォントの処理)。
url-loader : file-loader と似ていますが、ユーザーがしきい値を設定できる点が異なります。しきい値より大きい場合は、ファイル ローダーに渡されて処理されます。しきい値より小さい場合は、ファイルの内容は、base64 の形式でコードに挿入されます (画像とフォントの処理)。
eslint-loader: ESLint を通じて JavaScript コードをチェックします。
image-loader: 画像ファイルをロードして圧縮します。
一般的なプラグイン:
html-webpack-plugin : HTML ファイルを生成し、パッケージ化された JS および CSS ファイルを HTML ファイルに自動的に挿入します。
mini-css-extract-plugin :スタイル ファイルを分離し、CSS を別のファイルに抽出し、オンデマンドでの読み込みをサポートします。
(extract-text-webpack-plugin を置き換えます);
terser-webpack-plugin: ES6 コードの圧縮(Webpack4) をサポートします。
webpack-bundle-analyzer : Webpack 出力ファイルの量を視覚化します。
webpack-Parallel-uglify-plugin:複数のプロセスでコード圧縮を実行してビルド速度を向上させます
clean-webpack-plugin : 古いファイルが残らないように、各ビルドの前に出力ディレクトリをクリーンアップします。
uglifyjs-webpack-plugin : JavaScript コードを圧縮してファイル サイズを削減します (Webpack4 より前)。
optimize-css-plugin: CSS を圧縮します。
プラグインの定義: 環境変数を定義します。
コンパイル時に設定済みのグローバル オブジェクトを作成できるようにします (Webpack 4 以降では、モードを指定すると自動的に設定されます)。
これは webpack の組み込みプラグインであるため、インストールする必要はありません。
copy-webpack-plugin : 静的ファイルを出力ディレクトリにコピーします。
たとえば、Vue のパッケージ化プロセス中に、いくつかのファイルを public ディレクトリに置くと、このディレクトリは dist フォルダにコピーされます。
具体解析：
1、ローダー
Webpack におけるローダーの役割は何ですか? 一般的に使用されるローダーは何ですか? -CSDN ブログ
ローダーは 直訳すると「ローダー」となります。
Webpack はすべてのファイルをモジュールとして扱いますが、Webpack がネイティブに解析できるのは js ファイルのみであり、他のファイルもパッケージ化する場合に使用されます loader。
したがって、loaderこの機能はwebpack に非 JavaScript ファイルを ロードおよび解析する機能を提供することです。
2、プラグイン
Webpack におけるプラグインの役割は何ですか? よく使われるプラグインは何ですか? -CSDN ブログ
Plugin は 直訳すると「プラグイン」となります。
プラグインは webpack の機能を拡張し、webpack にさらなる柔軟性を与えることができます。
Webpack の実行ライフサイクル中に多くのイベントがブロードキャストされ、プラグインはこれらのイベントをリッスンし、Webpack が提供する API を通じて適切なタイミングで出力結果を変更できます。
3. さまざまな用途:
ローダー はmodule.rulesで構成されます。これは、ローダーがモジュールの解析ルールとして存在することを意味します。
各構成アイテムには、どのファイルをどのローダーで処理する必要があるかを規定する 1 つ以上のルール オブジェクトが含まれています。
型は配列で、各項目は 1 つで
Object、ファイルの種類 (test)、読み込み内容 (loader)、および使用されるパラメーター (options)を記述します。
プラグイン は で個別に設定されますplugins 。
型は配列、各項目はインスタンスであり
plugin、パラメーターはコンストラクターを通じて渡されます。
4. まとめ
要約すると、ローダーはモジュール変換を処理するために使用され、プラグインは webpack の機能を拡張し、追加のビルド タスクを追加するために使用されます。
これらは、webpack 設定ファイル内のさまざまな設定項目を通じて設定および使用されます。