3月28号 webpack学习日记 自定义loader

一.文件目录

二.自定义loader配置，（修改css内容）

        1.先初始化自定义loader目录文件夹 npm init -y

        2.安装自定义loader，指令npm install ./[name]-loader

3.配置文件

module.exports = function(csstext){
    let csstext2 = csstext.replace(/background:.*;/g,function(match){
        return match + '\nfilter: grayscale(100%);'
    })
    return csstext2;
}

三.webpack.config.js配置文件

const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
    entry: './src/index.js',
    output: {
        clean: true,
        filename: 'bundle.js'
    },
    mode: 'development',
    plugins: [
        new VueLoaderPlugin(),
    ],
    module: {
        rules: [{
                test: /\.vue$/,
                use: ['vue-loader']
            },
            {
                test: /\.hbs$/,
                use: ['handlebars-loader']
            },
            {
                test: /\.(jpg|png)$/,
                type: 'asset'
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader',
                {
                    loader:'bg-loader'
                }
            ]
            },

        ]
    }
}

四，自定义在css/js文件添加内容

module.exports = function(content){
    var useStrictPrefix = '/* \n ##学号：<括号里写你的学号> \n ##姓名：<括号里写你的姓名> \n ##日期：<括号里写考试日期> \n */';
    return useStrictPrefix + content;
}

module.exports = function(csstext){
    let csstext2 = csstext.replace(/ border:.*;/,function(match){
        return match + '\nborder: 2px solid red;\n'
    })
    return csstext2;
}