插件是 webpack 的支柱功能。webpack 自身也是构建于,你在 webpack 配置中用到的相同的插件系统之上!
插件目的在于解决 loader 无法实现的其他事。
剖析
webpack 插件是一个具有 apply
属性的 JavaScript 对象。apply
属性会被 webpack compiler 调用,并且 compiler 对象可在整个编译生命周期访问。
ConsoleLogOnBuildWebpackPlugin.js
----- ---------- - -------------------------------- ----- ------------------------------ - --------------- - ---------------------------------- ----------- -- - -------------------- --------- -- - -
compiler hook 的 tap 方法的第一个参数,应该是驼峰式命名的插件名称。建议为此使用一个常量,以便它可以在所有 hook 中复用。
用法
由于插件可以携带参数/选项,你必须在 webpack 配置中,向 plugins
属性传入 new
实例。
根据你的 webpack 用法,这里有多种方式使用插件。
配置
webpack.config.js
----- ----------------- - ------------------------------ ---- --- -- ----- ------- - ------------------ --------- ----- ---- - --------------- ----- ------ - - ------ ----------------------------- ------- - --------- ----------------------------- ----- ----------------------- ------- -- ------- - ------ - - ----- -------------- ---- -------------- - - -- -------- - --- ---------------------------------- --- ---------------------------- -------------------- - - -------------- - ------
Node API
?> 即便使用 Node API,用户也应该在配置中传入 plugins
属性。compiler.apply
并不是推荐的使用方式。
some-node-script.js
----- ------- - ------------------ ---- ------- ------------ ----- ------------- - ------------------------------ --- -------- - ---------------------- ------------------ ------------------------- -------------------------- ------ - -- --- --
T> 你知道吗:以上看到的示例和 webpack 自身运行时(runtime) 极其类似。wepback 源码中隐藏有大量使用示例,你可以用在自己的配置和脚本中。