實現webpack的banner-loader

banner-loader實現

banner-loader.js

let loaderUtils = require('loader-utils');
let validateOptions = require('schema-utils');
let fs = require('fs');

function loader(source) {
    let options = loaderUtils.getOptions(this);
    let cb = this.async();
    let schema = {
        type: 'object',
        properties: {
            text: {
                type: 'string',
            },
            filename: {
                type: 'string',
            }
        }
    };
    // 校驗一下參數是否符合
    validateOptions(schema, options, 'banner-loader');
    if (options.filename) {
        this.addDependency(options.filename);
        fs.readFile(options.filename, 'utf-8', function (err, data) {
            console.log(data);
            cb(err, `/**${data}*/${source}`);
        });
    } else {
        console.log('hahaha');
        cb(null, `/**${options.text}**/${source}`);
    }
}

module.exports = loader;

webpack.config.js:

let path= require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'development',
    resolveLoader: {
        modules: ['node_modules', path.resolve(__dirname, 'loaders')],
    },
    devtool: "source-map",
    watch: true,
    module: {
        // loader的分類，pre在前面的， post在後面， 然後就是普通normal
        // loader的順序  pre +normal + inline + post;   從右向左，從下倒上
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: "banner-loader",
                    options: {
                        text: 'zhangfeng',
                        filename: path.resolve(__dirname, 'banner.js'),
                    }
                }
            }
            // {
            //     test: /\.js$/,
            //     use: {
            //         loader: 'babel-loader',
            //         options: {
            //             presets: [
            //                 '@babel/preset-env'
            //             ]
            //         }
            //     }
            // }
        ]
    }
};