Webpack 插件开发以及插件理解

最新推荐文章于 2024-08-27 08:40:24 发布

春馨梦

最新推荐文章于 2024-08-27 08:40:24 发布

阅读量550

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/tannongchun/article/details/79108308

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

插件1 => ConsoleLogOnBuildWebpackPlugin.js

function ConsoleLogOnBuildWebpackPlugin() {
    console.log(" 咋办 我被调用了....... ");
}

ConsoleLogOnBuildWebpackPlugin.prototype.apply = function(compiler) {
    compiler.plugin('run', function(compiler, callback) {
        console.log("webpack 构建过程开始！！！");

        callback();
    });
};

// 对外提供暴露接口
module.exports=ConsoleLogOnBuildWebpackPlugin;

插件2 => ConsoleLogOnBuildWebpackPlugin2.js 
function ConsoleLogOnBuildWebpackPlugin2() {
    console.log(" 2===> 咋办 我被调用了....... ");
}

ConsoleLogOnBuildWebpackPlugin2.prototype.apply = function(compiler) {
    compiler.plugin('run', function(compiler, callback) {
        console.log("webpack2  构建过程开始！！！");

        callback();
    });
};

// 对外提供暴露接口
module.exports=ConsoleLogOnBuildWebpackPlugin2;
webpack.config.js 配置文件
 
 
  
  // require 写法来自于 Node js
// ES6 （import  ==== export ）
 const  consoleLogOnBuildWebpackPlugin =require('./plugins/ConsoleLogOnBuildWebpackPlugin');
const  consoleLogOnBuildWebpackPlugin2 =require('./plugins/ConsoleLogOnBuildWebpackPlugin2');
module.exports = {
    entry: {
        main:['../src/js/app.js','../src/js/app1.js']
    },
    output: {
        filename: '[name].[hash:8].js',
        chunkFilename: 'js/[chunkhash:8].js',
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    { loader: 'style-loader' },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new consoleLogOnBuildWebpackPlugin(),
        new consoleLogOnBuildWebpackPlugin2()
    ]
};
  
  执行结果：