携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情
我们都是在 index.html 文件中使用 script 标签手动的引入所有资源的。然而随着应用程序不断的增多，如果我们继续手动的管理 index.html 文件就会变得越来越困难。
那么，Webpack 能否帮助我们自动来引入所有资源吗？答案是肯定可以，那么要如何实现呢？这就是需要使用到 Webpack 给我们提供的插件了。通过插件可以使得整个过程变得更加简单。 现在，我们先简单的给大家介绍一下什么是 Webpack 插件，在后面的课程中我们会深入的研究插件。
我们说 Webpack 就像一条生产线，它要经过一系列的处理流程以后才能将原文件（入口文件）转化成输出的结果。
入口文件的 JS 还可以依赖于其他的两个 JS 模块，其中被依赖的 JS 模块可能还依赖其他的 JS 模块，并且这个 JS 可能也会引用 CSS 文件，这个 CSS 文件的引入需要使用 Webpack loaders （加载器）。loaders 具体能做什么，我们会在后续的章节介绍。
Webpack 会把这个依赖的关系都记录下来，然后交给 Webpack 的编辑器。Webpack 的编译器经过加工以后会生成目标文件，比如 CSS 和 JS 文件。
Webpack 的编译的过程需要应用一些工具来帮忙，这些工具可以帮助 Webpack 来执行一些特定的任务，比如打包优化、资源管理、注入环境变量等等。那么这些工具就是我们所谓的 plugins（插件）。
Webpack 到底为我们提供了那些插件，通过浏览器打开 Webpack 官网。Webpack 官网给我们提供三部分插件：Webpack 社区插件、Webpack 内置插件和 Webpack 第三方插件。在后续的课程中，我们会逐渐的展开这些插件的介绍。
想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。
多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建一个插件实例。
