在前端开发过程中，webpack 是必不可少的工具之一。而其中涉及到的插件则更是在各个领域中被广泛使用。但是在项目中使用大量插件容易造成代码臃肿，这时使用 load-webpack-plugins 这个 NPM 包就可以非常方便的加载和管理需要用到的插件。
简介
load-webpack-plugins 数据依赖分析工具，可以将指定参数中的 String 类型的 npm 包名、Function 类型、Object 类型解析为 webpack 的 plugins 配置项。
安装
在您的项目中使用以下命令安装 load-webpack-plugins：
--- ------- ---------- --------------------
使用
引入和初始化插件
首先需要引入
load-webpack-plugins：----- ---- - --------------------------------
或者
------ ---- ---- -----------------------
通过
load函数可以在 webpack 配置项中引入需要的插件：----- ------------- - - -------- ------ -------- ------------------------ ------------------------- --- --这里配置了使用
clean-webpack-plugin和eslint-webpack-plugin两个插件。
配置选项
load 函数接受一个 Object 类型的参数，其中可用的配置选项如下：
config（Object/Array< Object>）
这个配置项可以用于将配置项某一部分提取出来单独配置，然后通过 load 引入配置合并。
----- ------ - -
----- -----------
---- ---------------
--
----- ------------- - -
------- -
------ ------
------- ---------
---
--
--include（String/Array< String>）include配置项用于配置需要加载的插件名。这里的插件名是通过 npm 包名获取的，需要注意的是，对于带 scope 的包，需要完全的给出 name，即 scope 和 name，例如：@babel/core。----- ------------- - - -------- ------ -------- ------------------------ ------------------------- --- --exclude（String/Array< String>）exclude配置项用于配置需要排除的插件名。与include配置项不同的是，exclude中的插件名不会被加载到 webpack 配置中。----- ------------- - - -------- ------ -------- ------------------------ ------------------------- -------- ---------------------------- --- --extend（Boolean）extend配置项默认为true，它可以用于控制是否继承当前包中的已安装插件。----- ------------- - - -------- ------ -------- ------------------------ ------------------------- -------- ---------------------------- ------- ------ --- --
示例代码
这里通过使用 load-webpack-plugins 和 clean-webpack-plugin 插件的组合，示例代码如下：
----- ---- - ----------------
----- ---- - --------------------------------
----- - ------------------ - - ------
-------- -------------------------
-----
-------------- - -
----- -------------
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
-------- ---- ----------------------
--这里需要注意的是，对于 clean-webpack-plugin 这样已经被安装的插件，需要通过 () 的方式将其提取出来并赋值给 CleanWebpackPlugin。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005533681e8991b448d07bd