前言
在前端开发中，使用 webpack 打包工具进行资源打包和前端静态文件的管理是当前最流行的方式之一。webpack 能够将多种静态资源打包成一个或多个文件，使页面加载速度更快，代码维护和更新更加简单和方便。然而，webpack 的一些配置并不是那么容易实现，尤其是在配置多个插件时，需要引入多个插件，因此每次改变这些插件时，都需要修改配置文件，非常麻烦。在这种情况下，我们可以使用 npm 包 webpack-load-plugins 来简化这个过程。
简介
webpack-load-plugins 是一个 npm 包，它能帮助加载外部的 webpack 插件并引入当前所需的插件。它能够根据 package.json 文件自动引入所有需要的插件，使得我们不必手动引入每个插件。
安装
为了使用 webpack-load-plugins，我们需要首先安装它。
npm install webpack-load-plugins --save-dev
使用
引入
使用 webpack-load-plugins 引入插件非常简单。我们只需要在 webpack 的配置文件中添加以下代码:
const loadPlugins = require('webpack-load-plugins'); 然后，在使用插件时，不需要再添加 require('some-plugin')，例如使用 html-webpack-plugin 插件时，只需添加以下代码：
plugins: [
loadPlugins.htmlWebpackPlugin(),
...
]插件
下面是常用插件的使用示例。
html-webpack-plugin
此插件用于在将文件生成到输出目录时，同时生成一个 HTML 文件可以链接对应的 JavaScript 文件。
-- -------------------- ---- -------
-------- -
-------------------------------
--------- ----------------
--------- -------------
------- -------
------ -------- -----
----- ----
--
-template：HTML 模板的路径filename：输出的 HTML 文件名inject：插入脚本的位置title：设置模板的标题hash：是否生成带哈希值的文件名
clean-webpack-plugin
此插件用于在重新编译时清理打包目录。
plugins: [
loadPlugins.cleanWebpackPlugin(['dist'])
]extract-text-webpack-plugin
该插件将 CSS 提取到独立的文件中。
plugins: [
loadPlugins.extractTextPlugin('style.css')
]copy-webpack-plugin
此插件用于将文件和文件夹从一个位置复制到另一个位置。
plugins: [
loadPlugins.copyWebpackPlugin([
{ from: 'src/assets', to: 'assets' },
{ from: 'src/public', to: 'public' }
])
]总结
通过使用 webpack-load-plugins，我们可以自动引入 webpack 插件，使得 webpack 配置变得更加简单和方便。它为我们节省了很多时间，使我们能够更专注于开发，而不是配置。
参考
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671058dd3466f61ffdd6c
