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;
}