NPM 包 load-webpack-plugins 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发过程中，webpack 是必不可少的工具之一。而其中涉及到的插件则更是在各个领域中被广泛使用。但是在项目中使用大量插件容易造成代码臃肿，这时使用 load-webpack-plugins 这个 NPM 包就可以非常方便的加载和管理需要用到的插件。

简介

load-webpack-plugins 数据依赖分析工具，可以将指定参数中的 String 类型的 npm 包名、Function 类型、Object 类型解析为 webpack 的 plugins 配置项。

安装

在您的项目中使用以下命令安装 load-webpack-plugins：

npm install --save-dev load-webpack-plugins

使用

引入和初始化插件

首先需要引入 load-webpack-plugins：

const load = require('load-webpack-plugins');

或者

import load from 'load-webpack-plugins';

通过 load 函数可以在 webpack 配置项中引入需要的插件：
```
const webpackConfig = {
  plugins: load({
    include: ['clean-webpack-plugin', 'eslint-webpack-plugin'],
  }),
};
```
这里配置了使用 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。
```
const webpackConfig = {
  plugins: load({
    include: ['clean-webpack-plugin', 'eslint-webpack-plugin'],
  }),
};
```
exclude（String/Array< String>）

exclude 配置项用于配置需要排除的插件名。与 include 配置项不同的是， exclude 中的插件名不会被加载到 webpack 配置中。
```
const webpackConfig = {
  plugins: load({
    include: ['clean-webpack-plugin', 'eslint-webpack-plugin'],
    exclude: ['mini-css-extract-plugin'],
  }),
};
```

extend（Boolean）

extend 配置项默认为 true，它可以用于控制是否继承当前包中的已安装插件。

const webpackConfig = {
  plugins: load({
    include: ['clean-webpack-plugin', 'eslint-webpack-plugin'],
    exclude: ['mini-css-extract-plugin'],
    extend: false,
  }),
};

示例代码

这里通过使用 load-webpack-plugins 和 clean-webpack-plugin 插件的组合，示例代码如下：

-- -------------------- ---- -------
----- ---- - ----------------
----- ---- - --------------------------------
----- - ------------------ - - ------
  -------- -------------------------
-----

-------------- - -
  ----- -------------
  ------ -----------------
  ------- -
    --------- ------------
    ----- ----------------------- --------
  --
  -------- ---- ----------------------
--

这里需要注意的是，对于 clean-webpack-plugin 这样已经被安装的插件，需要通过 () 的方式将其提取出来并赋值给 CleanWebpackPlugin。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005533681e8991b448d07bd