webpack入门之插件(plugins)

crayon-shin-chan

于 2021-07-31 10:39:14 发布

阅读量245

点赞数

CC 4.0 BY-SA版权

分类专栏： surprise # webpack 文章标签： webpack

原文链接：https://webpack.js.org/concepts/plugins/

surprise 同时被 2 个专栏收录

932 篇文章 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

webpack

18 篇文章

订阅专栏

本文介绍了webpack中的核心功能——插件，它解决了loader无法处理的问题。插件是具备apply属性的JavaScript对象，其apply方法会在webpack编译生命周期中被调用。在使用插件时，需在配置文件的plugins属性下传入new实例，配置插件的参数和选项。

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

文档：https://webpack.js.org/concepts/plugins/

1.简介

插件是 webpack 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！

插件目的在于解决 loader 无法实现的其他事。

2.原理

webpack 插件是一个具有 apply 属性的 JavaScript 对象。

apply 属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

class ConsoleLogOnBuildWebpackPlugin {
    apply(compiler) {
        compiler.hooks.run.tap(pluginName, compilation => {
            console.log("webpack 构建过程开始！");
        });
    }
}