手写 loader

loader github

github1s

github.dev

loader bilibili

webpack-tpl-loader

将以tpl后缀结尾的文件编译成字符串的形式，再用babel-loader将字符串转换为js

目录

代码

tpl-loader

tpl-loader 代码

const { tplReplace } = require('../utils')
const { getOptions } = require('loader-utils')
function tplLoader(source) {
    source = source.replace(/\s+/g, '')
    const { log } = getOptions(this)
    const _log = log ? `console.log('compiled the file which is from ${ this.resourcePath }')` : ''

    return `
    export default (options) => {
        ${ tplReplace.toString() }
        ${ _log }
        return tplReplace('${source}', options)
    }
    `
}

module.exports = tplLoader
/* 
function tpl(options) {
    function tplReplace(template, replaceObject) {
        return template.replace(/\{\{(.*?)\}\}/g, (node, key) => {//参考replace方法
            return replaceObject[key]
        })
    }
    return tplReplace(`${source}`, options)//还是得用模板字符串占位符
} */

webpack.config.js

/* 
mode development production
entry 入口文件
output path 打包输出路径
devtool source-map
module  rules loader
plugins 插件
devServer 开发服务器

*/
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode: 'development',
    entry: resolve(__dirname, 'src/app.js'),
    output: {
        path: resolve(__dirname, 'build'),
        filename: 'app.js'
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.tpl$/,
                use: [
                    'babel-loader',//然后将字符串转为js程序
                    {
                        loader: './loaders/tpl-loader',//目的是写这个tpl-loader 将tpl文件转为字符串
                        options: {
                            log: true
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: resolve(__dirname, 'index.html')
        })
    ],
    devServer: {
        port: 3333
    }
}