天天看點

3月28号 webpack學習日記 自定義loader

一.檔案目錄

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

繼續閱讀