Webpack 中文文档(v4.15.1) 目录

webpack 插件(Plugins)

插件是 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 源码中隐藏有大量使用示例,你可以用在自己的配置和脚本中。


上一篇:加载器(Loaders)
下一篇:配置(Configuration)