webpack loader実現

位置
まず、私達はloaderプラグインがどこに書いてあるかを知りたいです.
開くwebpack.config.jsファイルは、module.rulesに私達のカスタムloaderを加入する:

{
    test: /.ts$/,
    use: [ 
            { 
                loader: path.resolve(__dirname,'./build/loader.js'), 
                options: { foo: true, } 
            } 
        ]
}

パラメータ取得:

const options = getOptions(this);

着信パラメータの校正:

const schema = {
    type: 'object',
    properties: { test: { type: 'string' } }
} as const
validate(schema, options);

私達は対応するパスのloader.tsを作成します.ここではtsを使ってloader:loader.tsを書きます.

import {getOptions} from 'loader-utils';
import {validate} from 'schema-utils';
const schema = {
 type: 'object', properties: { test: { type: 'string' } }} as const
//          
export default function (source) {
 //         getOptions       const options = getOptions(this);     //          ,            Error 
    validate(schema, options);
     //     
    console.log('source', source)     //                   
 //                :   
    const _source = source.replace(/alert(1)/, `console.log('grewer')`)
     console.log('_source', _source)
     return _source;
};

typescriptのAPIを使ってtsコードを解析します.

 const compiler = typescript
 
 let result = compiler.transpileModule(source, { compilerOptions: { module: typescript.ModuleKind.CommonJS } })
 
 console.log(result.outputText)
 
 return result.outputText;

transpileModuleこのAPIについては、ドキュメントを見る必要があります.元のドキュメント:https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API翻訳の中国語文書:https://zhuanlan.zhihu.com/p/141410800 typescriptは、私たちがあまり使わないアプリがたくさんあります.興味があれば、自分で調べてもいいです.
おわりに
このように私達は自分達のloaderを創建することができます.中では私達のソースコードに対して違った操作を行います.例えば、vue-loaderはラベルを通して3種類の()、js、css)システムのコードを分けて、残りのloaderの中の本文に書いてあるloader:https://github.com/Grewer/JsDemo/blob/master/webpackLoader/loader.ts