webpack3のローダー解析

Webpack で何ができるの?公式ウェブサイトに記載されている答えは、一言で言えば、すべてが簡単になります。様々なローダーが無限に登場して構築に迷ってしまいますが、ここではローダーの全解析をまとめます。この記事では主に webpack3 のローダーの完全な分析を紹介します。編集者がそれを参考にさせていただきます。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

コンセプト

ローダー、名前が示すように、英語での説明は次のとおりです:

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

中国語訳:

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

これから、ローダーの強力な役割がわかります:

1. 変換の役割。開発で使用されるものはすべて、Web ページの読み込みに必要な html+css+js+img などの必要な形式のファイルに変換されます。

2. 変換対象はソースコードです。ローダーはソースコードを変換するだけです。他の機能については、プラグインができないことを引き継ぎます。

一言で要約すると、ローダー、ローディングマシンは豆乳マシンのようなもので、材料を入れると本格的に動き始めます。

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

1、babel-loader

このパッケージでは、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'
}

E
2、style-loader

ドキュメント a & lt; style & gt; に CSS を追加します。

インストール:

npm install style-loader --save-dev

css-loader と併用することをお勧めします

使用:

{
 test: /\.css$/,
 use: [
 'style-loader',
 'css-loader'
]
}

3、css-loader

CSS ファイルを解析した後、import を使用してロードし、CSS を返しますコード

インストール:

npm install css-loader --save-dev

使用:

{
 test: /\.css$/,
 use: [ 'style-loader', 'css-loader' ]
}

4、レスローダー

LESSファイルのロードと翻訳

インストール:

npm install --save-dev less-loader less

使用する:

{
 test: /\.less$/,
 exclude: /node_modules/,
 use: ExtractTextPlugin.extract(['css-loader', 'less-loader'])
}

5、url-loader

base64でエンコードされたURLとしてファイルをロードします

画像ファイルを処理しますが、ファイルが制限より小さい場合は、データURLを返すことができます

インストール:

npm install --save-dev url-loader

使用:

{
 test: /\.(jpg|jpeg|png|gif)$/,
 loader: 'url-loader',
 options: {
   limit: 8192
 }
}

6、ファイルローダー

必要なオブジェクトをファイルとして出力し、そのパブリック URL

ハンドルを返すように webpack に指示しますSV g など、ファイルを出力フォルダーに送信し、(相対) URL を返します

インストール:

npm install file-loader --save-dev

E

使用:

{
 test: /\.(woff|woff2|svg|eot|ttf)$/,
 use: 'file-loader'
}

E

7、Vue-loader

ロードして、 VUE VUE コンポーネントの翻訳

インストール:

npm install --save-dev vue-loader vue vue-template-compiler

使用:

{
 test: /\.vue$/,
 loader: 'vue-loader',
 options: {
   loaders: {
     less: ExtractTextPlugin.extract({
       use: ['css-loader', 'less-loader'],
       fallback: 'vue-style-loader'
     })
   }
 }
}

関連推奨事項:

Java クラスローディングに基づくクラスローダーの詳細な説明

中型ローダーとサンプル分析plugin

yii2 が webuploader を使用して画像アップロードを実装する方法

以上がwebpack3のローダー解析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。