webpack loader 瀹炵幇

Posted 2020-12-21

鏍囩锛?a href='http://www.mamicode.com/so/1/webpack' title='webpack'>webpack   use   string   html   tran   寰堝   rip   put   bpa   

浣嶇疆

棣栧厛鎴戜滑瑕佺煡閬?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: 鈥榦bject鈥?
    properties: { test: { type: 鈥榮tring鈥?} }
} as const
validate(schema, options);

鑰屾垜浠垱寤哄搴旇矾寰勭殑 loader.ts 杩欓噷鎴戜滑浣跨敤 ts 鏉ュ啓 loader:
loader.ts:

import {getOptions} from 鈥榣oader-utils鈥?
import {validate} from 鈥榮chema-utils鈥?
const schema = {
 type: 鈥榦bject鈥? properties: { test: { type: 鈥榮tring鈥?} }} as const
// 鐢ㄦ潵楠岃瘉鍙傛暟鐨勫伐鍏?export default function (source) {
 //  閫氳繃宸ュ叿鍑芥暟 getOptions 鏉ヨ幏鍙栧弬鏁?const options = getOptions(this);     // 浣跨敤宸ュ叿鍙傛暟鏉ラ獙璇? 濡傛灉涓嶉€氳繃楠岃瘉鍒欐姏鍑?Error 
    validate(schema, options);
     // 鎵撳嵃浠ｇ爜
    console.log(鈥榮ource鈥? source)     // 鍦ㄨ繖閲屾垜浠彲浠ュ浠ｇ爜杩涜涓€绯诲垪鐨勬搷浣? // 鍋囧鎴戜滑瑕佹浛鎹竴浜涗笉鎯宠鐨勬暟鎹?   
    const _source = source.replace(/alert(1)/, `console.log(鈥榞rewer鈥?`)
     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 鍏锋湁寰堝鎴戜滑涓嶇粡甯镐娇鐢ㄧ殑 api, 濡傛灉鏈夊叴瓒ｅ彲浠ヨ嚜宸辨煡闃?/p>

缁撹

鍍忚繖鏍?鎴戜滑灏辫兘鍒涘缓鎴戜滑鑷繁鐨?loader, 鍦ㄩ噷闈㈠鎴戜滑鐨勬簮鐮佽繘琛屼笉鍚岀殑鎿嶄綔, 鍍忔槸 vue-loader 灏辨槸閫氳繃鏍囩 鍒嗗紑涓夌(html,js,css) 绯荤粺鐨勪唬鐮? 鍐嶅皢鍏堕€氳繃鍓╀綑 loader 閲岄潰
鏈枃涓啓鐨?loader: https://github.com/Grewer/JsDemo/blob/master/webpackLoader/loader.ts