今回は webpack3 のローダー使用状況の分析についてお届けします。 webpack3 でのローダー使用状況と分析に関する 注意点 について、実際のケースを見てみましょう。
まず、webpack の公式 Web サイトを表示します。webpack では何ができるでしょうか?公式ウェブサイトに記載されている答えは、一言で言えば、すべてが簡単になります。
様々なローダーが無限に登場して構築に迷ってしまいますが、ここではローダーの全解析をまとめます。
コンセプト
ローダー、その名の通りローダー、英語での説明は以下の通りです
ローダーは、ソースコードに適用される変換です。 モジュールを使用すると、インポートまたは「ロード」時にファイルを前処理できます。 したがって、ローダーは他のビルド ツールの「タスク」のようなものです。 ローダーがフロントエンドのビルドステップを処理する強力な方法を提供します。 ファイルを別の言語 (TypeScript など) から変換して、 JavaScript、またはデータ URL としてのインライン画像を使用することもできます。 JavaScript モジュールから CSS ファイルを直接インポートするなど!
中国語訳は:
ローダーは、モジュールのソース コードを変換するために使用されます。ローダーを使用すると、モジュールをインポートまたは「ロード」するときにファイルを前処理できます。したがって、ローダー 他のビルド ツールの「タスク」に似ており、フロントエンドのビルド ステップを処理する強力な方法を提供します。ローダーは、次のようなさまざまな言語からファイルをロードできます。 TypeScript) を JavaScript に変換するか、インライン画像をデータ URL に変換します。ローダーを使用すると、JavaScript を直接使用することもできます CSS ファイルをモジュールにインポートします。 このことから、ローダーの強力な役割がわかります。
一般的に使用されるローダー
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. スタイルローダー