ローダーはwebpackのコアの1つです。さまざまなタイプのファイルをwebpackで認識可能なモジュールに変換するために使用されます。
使用する
module: {
loaders: [
{
test: /\.css$/,
use: ['style-loader']
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
]
}
ローダーとプラグインの違い
ローダーはモジュールのソースコードを変換するために使用され、プラグインの目的はローダーが達成できない他のことを解決することです。
プラグインは任意の段階で呼び出すことができ、ローダー全体でローダーの出力をさらに処理し、事前登録されたコールバックを実行し、コンパイルオブジェクトを使用していくつかの低レベルの処理を実行できます。
チェーン内の複数のローダーを呼び出す
チェーン内の複数のローダーを呼び出すときは、それらが逆の順序で実行されることに注意してください。配列の形式に応じて、右から左、または下から上に実行されます。
- 最後のローダーは最も古いローダーと呼ばれ、元のリソースコンテンツが渡されます。
- 最初のローダーはlastと呼ばれ、期待される値は発信JavaScriptとソースマップ（オプション）です。
- ミドルローダーが実行されると、前のローダーの結果が渡されます。
webpackリソースの読み込みは作業パイプラインに似ており、複数のローダーを使用でき、出力結果は標準のjsコードである必要があります。
例：
//webpack.config.js
{
test: /\.js/,
use: [
'bar-loader',
'foo-loader'
]
}
foo-loaderは元のリソースに渡され、bar-loaderはfoo-loaderの出力を受け取り、最終的に変換されたモジュール（jsコード）とソースマップ（オプション）を返します。
シミュレーションローダーの実装
シミュレーション1
ローダーは.txtファイルを処理し、任意のインスタンスで[name]をローダーオプションで設定された名前に直接置き換えます。次に、デフォルトのエクスポートされたテキストを含むJavaScriptモジュールに戻ります。
//src/loader.js
import { getOptions } from 'loader-utils';
export default function loader(source) {
const options = getOptions(this);
source = source.replace(/\[name\]/g, options.name);
return `export default ${ JSON.stringify(source) }`;
};
使用する：
module: {
rules: [{
test: /\.txt$/,
use: {
loader: path.resolve(__dirname, '../src/loader.js'),
options: {
name: 'Alice'
}
}
}]
}
シミュレーション2
単純なスタイルローダーの機能をシミュレートします。
//将css插入到head标签内部
module.exports = function (source) {
let script = (`
let style = document.createElement("style");
style.innerText = ${JSON.stringify(source)};
document.head.appendChild(style);
`);
return script;
}
使用する
resolveLoader: {
modules: [path.resolve('node_modules'), path.resolve(__dirname, 'src', 'loaders')]
},
{
test: /\.css$/,
use: ['style-loader']
},
https://www.webpackjs.com/contribute/writing-a-loader/を参照してください
この記事のリンクhttps://blog.csdn.net/qq_39903567/article/details/115334778