webpack3のローダー使用状況分析

今回は webpack3 のローダー使用状況の分析についてお届けします。 webpack3 でのローダー使用状況と分析に関する 注意点 について、実際のケースを見てみましょう。

まず、webpack の公式 Web サイトを表示します。webpack では何ができるでしょうか?公式ウェブサイトに記載されている答えは、一言で言えば、すべてが簡単になります。

様々なローダーが無限に登場して構築に迷ってしまいますが、ここではローダーの全解析をまとめます。

コンセプト

ローダー、その名の通りローダー、英語での説明は以下の通りです

ローダーは、ソースコードに適用される変換です。 モジュールを使用すると、インポートまたは「ロード」時にファイルを前処理できます。 したがって、ローダーは他のビルド ツールの「タスク」のようなものです。 ローダーがフロントエンドのビルドステップを処理する強力な方法を提供します。 ファイルを別の言語 (TypeScript など) から変換して、 JavaScript、またはデータ URL としてのインライン画像を使用することもできます。 JavaScript モジュールから CSS ファイルを直接インポートするなど!

中国語訳は:

ローダーは、モジュールのソース コードを変換するために使用されます。ローダーを使用すると、モジュールをインポートまたは「ロード」するときにファイルを前処理できます。したがって、ローダー 他のビルド ツールの「タスク」に似ており、フロントエンドのビルド ステップを処理する強力な方法を提供します。ローダーは、次のようなさまざまな言語からファイルをロードできます。 TypeScript) を JavaScript に変換するか、インライン画像をデータ URL に変換します。ローダーを使用すると、JavaScript を直接使用することもできます CSS ファイルをモジュールにインポートします。 このことから、ローダーの強力な役割がわかります。

変換の役割。開発で使用されるものはすべて、Web ページの読み込みに必要な html+css+js+img などの必要な形式のファイルに変換されます。
変換対象はソースコードです。ローダーはソースコードを変換するだけです。他の機能については、プラグインができないことを引き継ぎます。
一言で要約すると、ローダーは豆乳マシンのようなものです。材料を入れると本格的に動き始めます。

一般的に使用されるローダー

1.バベルローダー

このパッケージでは、Babel と webpack を使用して JavaScript ファイルをトランスパイルできます。

ES2015+ コードをロードし、Babel を使用して ES5 にトランスパイルします

インストール:

npm install --save-dev babel-loader babel-core babel-preset-env webpack

使用:

{
 test: /\.js$/,
 exclude: /node_modules/,
 loader: 'babel-loader'
}

2. スタイルローダー