webpack--概念5--插件

最新推荐文章于 2025-07-16 08:17:56 发布

陌上浮屠

最新推荐文章于 2025-07-16 08:17:56 发布

阅读量602

点赞数

分类专栏： webpack

webpack 专栏收录该内容

14 篇文章

订阅专栏

本文深入探讨了Webpack插件的工作原理及其应用场景。介绍了插件如何通过其apply方法参与到Webpack的整个构建周期中，并展示了两种常见插件使用方式：在配置文件plugins属性中引入和使用Node API。此外还提供了一个具体的ConsoleLogOnBuildWebpackPlugin示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

插件是webpack的支柱功能；目的在于解决loader无法实现的其他事情；

1：源码分析：

webpack插件是一个具有apply属性的JS对象。apply属性会被webpack compiler调用，并且compiler对象在整个编译生命周期访问

function ConsoleLogOnBuildWebpackPlugin() {

};

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

2：2种使用方法：

（1）在plungins属性中传入new实例

//webpack.config.js
cponst HtmlWebpackPlugin=require('html-webapck-plugin');
const webpack=require('webpack');
const path=require('path');
const config={
    entry:'./path/to/my/entry/fils.js',
    output:{
        path:path.resolve(_dirname,'dist'),
        filename:'my-first-webpack.bundle.js'
    },
    module:{
        rules:[
            {
                test:/\.text/,
                use:'raw-loader'
            }
        ]
    },
    plugins:[
        new webpack.optimize.UglifyJsPlugin(),
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ]
}
module.exports=config;

（2）Node API（不推荐）

//some-node-script.js
const webpack = require('webpack'); //访问 webpack 运行时(runtime)
const configuration = require('./webpack.config.js');

let compiler = webpack(configuration);
compiler.apply(new webpack.ProgressPlugin());
compiler.run(function(err, stats) {
    // ...
});