插件机制概述是webpack的另一个核心特性。其目的是加强webpack在项目自动化方面的能力。众所周知，loader负责加载我们项目中的各种资源模块，从而对整个项目进行打包。plugin用于处理除资源加载之外的少量自动化工作。 比如plugin可以帮助我们在打包前自动清理dist目录，这是我们上次打包的结果。 或者可以用来帮助我们把不需要打包的资源文件复制到输出目录，也可以用来帮助我们压缩我们打包结果的输出代码。 总之，有了plugin，webpack几乎可以做前端工程的所有事情，这也是为什么很多初学者都知道webpack是前端工程的原因。 接下来，我们来学习一下webpack的插件机制，以及在这个过程中经常遇到的插件。最后，我们自己开发一个插件，了解一下它的工作原理。 常见插件的详细介绍几种最常见的插件的详细介绍，然后通过这个项目了解如何使用插件。 自动清理输出目录的插件。 通过前面的演示，您可能已经发现，每次webpack打包时，都会覆盖dist目录。在打包之前，dist中可能已经有少量以前的遗留文件。如果再打包，可能只会覆盖那些同名的文件，剩下的被移除的资源文件会一直堆积在里面，这是非常不公平的。 更合适的方法是在每个包之前自动清除dist目录，这样只有那些我们需要的文件才会保存在dist中。 Clean-webpack-plugin是满足这种需求的好方法。它是第三方插件，我们需要先安装它。安装完成后，我们将返回到webpack配置文件，然后导入这个插件。 这个webpack模块导出了一个名为clean-webpack-plugin的成员，我们将其解构并返回到配置对象。 在这里使用插件时，我们需要给配置对象添加一个插件属性。这个属性是专门用来配置插件的地方，它是一个数组。我们来添加一个数组，也就是给这个数组添加一个元素。 大多数插件模块都导出一个类型，我们的clean-webpack-plugin也不例外，所以我们用它通过这个类型创建一个实例，然后把这个实例放到插件的数组中。 const path = require(' path ')；const { CleanWebpackPlugin } = require(' clean-web pack-plugin ')；module.exports = { entry:'。/src/main.js '，输出:{ filename: 'bundle.js '，路径:path.join(__dirname，' dist ')，publicPath: 'dist/' }，模块:{ rules: [ { test: /。css$/，使用:[ 'style-loader '，' css-loader' ] }，{ test: /。png$/，use: 'file-loader' } ] }，Plugins:[new cleanwebpackplugin()]}完成后我们再试一次，回到命令行打包。这时我们发现，之前的打包结果不会存在了。dist里面全是我们的打包结果，很干净。 html-webpack-plugin的另一个非常常见的需求是自动生成使用打包结果的html。在此之前，我们的html是硬编码的，单独存储在项目的目录中。这种方法有两个问题。 首先是我们在发布项目的时候，需要用时间来发布目录下的html文件和dist目录下的所有打包结果，比较麻烦。 上线后，我们需要确保html代码中的路径和引用是正确的。 第二个问题是，如果我们输出的目录或者文件名是我们输出的文件名，也就是我们打包结果的配置发生了变化，那么html代码中script标签引用的路径也需要手动修改。这是硬编码的两个问题。 处理这两个问题最好的办法就是通过webpack自动生成我们的html文件，也就是让html自动参与到html构建的过程中。在构建的过程中，webpack知道生成了多少个包，并会自动将这些打包的包添加到我们的页面中。 这样，我们的html也导出到了dist目录。当我们上线时，我们只需要发布dist目录。其次，我们html中对bundle的引用是动态注入的，不需要手动硬编码。 所以他可以保证路径的引用是正常的。 我们需要使用一个名为html-webpack-plugin的插件来实现。这个插件也是第三方模块，这里也需要单独安装这个模块。 Yarnhtml-web pack-plugin-dev安装完成后，我们回到配置文件，然后加载这个模块。 与clean-webpacl-plugin不同，html-webpack-plugin默认导出一个插件类型，我们不需要解构它的内部成员。 使用这种类型，我们可以返回到配置文件的plugins属性，然后添加这种类型的实例对象。 这就完成了插件的配置。 const path = require(' path ')；const { CleanWebpackPlugin } = require(' clean-web pack-plugin ')；const HtmlWebpackPlugin = require(' html-web pack-plugin ')；module.exports = { entry:'。/src/main.js '，输出:{ filename: 'bundle.js '，路径:path.join(__dirname，' dist ')，publicPath: 'dist/' }，模块:{ rules: [ { test: /。css$/，使用:[ 'style-loader '，' css-loader' ] }，{ test: /。png$/，use: 'file-loader' } ] }，Plugins: [newcleanwebpackplugin()，newhtmlwebpackplugin ()]}最后，我们回到命令行终端，再次运行打包命令。 这时，在我们的打包过程中会自动生成一个index.html文件，并输出到dist目录中。 我们找到了这份文件。 这个文件中的内容是一个使用bundle.js的空白html。正确的路径应该是当前目录中的bundle.js，我们确实在这里生成了dist/bundle.js。 这是因为当我们以前尝试其他功能时，我们将输出属性中的publicPath设置为dist。现在，我们的html是在dist目录中自动生成的，所以我们不再需要这样的配置了。让我们回到配置文件来删除这样的配置。 const path = require(' path ')；const { CleanWebpackPlugin } = require(' clean-web pack-plugin ')；const HtmlWebpackPlugin = require(' html-web pack-plugin ')；module.exports = { entry:'。/src/main.js '，输出:{ filename: 'bundle.js '，路径:path.join(__dirname，' dist ')，// publicPath: 'dist/' }，模块:{ rules: [ { test: /。css$/，使用:[ 'style-loader '，' css-loader' ] }，{ test: /。png$/，use: 'file-loader' } ] }，Plugins: [new cleanwebpackplugin()，new htmlwebpackplugin ()]}删除后我们会重新打包一遍。 包完成后，我们的index.html中的包引用的路径是正常的。 此时，我们不再需要在目录中编写死的html文件。将来，我们的html文件将通过自动抓取来生成。 但是，这里仍然有一些需要改进的地方。首先，必须修改默认生成的html的标题。另外，我们经常需要自己设置少量的原始数据标签和页面中的基本DOM结构。对于简单的自我设置，我们可以通过修改插件html-webpack-plugin的少量属性来实现。让我们回到webpack的配置文件。 这里，我们给html-webpack-plugin构造函数一个对象参数来指定我们的配置选项，title属性用来设置我们的html的标题。 我们在这里将其设置为webpack-plugin-simple。 Meta属性可以用对象的属性在页面中设置少量的原始数据标签。例如，我们尝试向页面添加一个视窗设置。 const path = require(' path ')；const { CleanWebpackPlugin } = require(' clean-web pack-plugin ')；const HtmlWebpackPlugin = require(' html-web pack-plugin ')；module.exports = { entry:'。/src/main.js '，输出:{ filename: 'bundle.js '，路径:path.join(__dirname，' dist ')，// publicPath: 'dist/' }，模块:{ rules: [ { test: /。css$/，使用:[ 'style-loader '，' css-loader' ] }，{ test: /。png$/，use: 'file-loader' } ] }，plugins: [ new CleanWebpackPlugin()，new HtmlWebpackPlugin({ title:' web pack Plugin Sample '，Meta:{ viewport:' width = device-width ' } } }完成后我们会回到命令行重新打包。我们来看生成的html文件，这里的title和mate会根据我们配置文件中的配置生成。 如果我们需要自己设置很多html文件，最好的办法就是在原代码中添加一个模板生成html文件，然后让这个html-webpack-plugin插件根据我们的模板生成页面。 我们在src目录下创建一个新的index.html的html模板，然后我们可以根据需要在这个文件中添加少量相应的元素。对于我们希望在模板中动态输出的少量内容，我们可以使用loadsh template的语法来输出。 在这里，我们可以通过属性htmlWebpackPlugin.options访问我们插件的配置数据，我们可以直接在配置数据中输出标题。 当然，变量htmlWebpackPlugin其实是他内部提供的变量，你也可以通过其他属性添加少量自己设置的变量。 & lt！DOCTYPE html & gt& lthtml lang = " en " & gt& lthead & gt& ltmeta charset="UTF-8 " >& ltmeta name = " viewport " content = " width =设备宽度，initial-scale=1.0 " >& lttitle & gt& lt% = htmlwebpackplugin . options . title % & gt；& lt/title & gt；& lt/head & gt；& ltbody & gt& ltscript src = " dist/" & gt；& lt/script & gt；& lt/body & gt；& lt/html & gt；有了这个模板文件之后，我们回到配置文件，我们通过template属性指定我们使用的模板为src/index.html文件const path = require(' path ')；const { CleanWebpackPlugin } = require(' clean-web pack-plugin ')；const HtmlWebpackPlugin = require(' html-web pack-plugin ')；module.exports = { entry:'。/src/main.js '，输出:{ filename: 'bundle.js '，路径:path.join(__dirname，' dist ')，// publicPath: 'dist/' }，模块:{ rules: [ { test: /。css$/，使用:[ 'style-loader '，' css-loader' ] }，{ test: /。png$/，use: 'file-loader' } ] }，plugins: [ new CleanWebpackPlugin()，new HtmlWebpackPlugin({ title:' web pack Plugin Sample '，Meta:{ viewport:' width = device-width ' }，template:'。/src/index.html'})]}包再次，我们来看看生成的html文件。此时我们看到的html内容是根据我们刚刚创建的模板动态生成的。以上是我们自己设置输出html内容的几种方式。 多页面文件也是一个非常常见的需求。除非我们的应用程序是单页面应用程序，否则我们肯定需要多个html文件。 如果我们需要输出多个html文件，其实很简单。让我们回到配置文件。 这是我们刚刚通过html-webpack-plugin创建的对象，用于生成文件index.html。 然后我们可以通过这个类型创建一个新的实例对象来创建额外的html文件。 例如，让我们在这里添加一个新实例，然后用它创建一个名为about.html的页面文件。我们可以通过文件名来指定输出文件名。这个属性的默认值是index.html，我们需要在这里将其设置为about.html。 const path = require(' path ')；const { CleanWebpackPlugin } = require(' clean-web pack-plugin ')；const HtmlWebpackPlugin = require(' html-web pack-plugin ')；module.exports = { entry:'。/src/main.js '，输出:{ filename: 'bundle.js '，路径:path.join(__dirname，' dist ')，// publicPath: 'dist/' }，模块:{ rules: [ { test: /。css$/，使用:[ 'style-loader '，' css-loader' ] }，{ test: /。png$/，use: 'file-loader' } ] }，plugins: [ new CleanWebpackPlugin()，new HtmlWebpackPlugin({ title:' web pack Plugin Sample '，meta:{ viewport:' width = device-width ' }，template:'。/src/index.html' })，New HTMLWebPackPlugin({ filename:' about . html ' })]}重新打包，此时在dist目录下同时生成了index.html和about.html两个页面文件。 根据这样的尝试，我们知道如果需要创建多个页面，那么我们可以在插件列表中添加htmlWebpackPlugin实例的多个对象，每个对象负责生成一个页面文件。 一般copy-webpack-plugin项目中会有很多文件，这些文件不仅会在开发环境中使用，而且最终会发布到网上，比如我们网站上的favicon.ico。通常，我会将这些文件放在项目根目录下的公共目录中。 我们希望webpack一打包就可以将它们复制到输出目录中。 我们可以使用copy-webpack-plugin来实现这个需求。 我们还需要先安装这个插件。 准备public/favicon.icon文件 Yarn add copy-web pack-plugin-dev安装完成后，我们将返回配置文件，导入这个插件的类型。 最后，我们还在plugins属性中添加了这种类型的实例。 这种类型的构造函数要求我们传入一个数组来指定我们需要复制的文件路径。它可以是通配符、目录或文件的相对路径。 我们在这里传递的是一个public/**目录。 这意味着在打包过程中，公共目录中的所有文件都将被复制到输出目录中。 const path = require(' path ')；const { CleanWebpackPlugin } = require(' clean-web pack-plugin ')；const HtmlWebpackPlugin = require(' html-web pack-plugin ')；const CopyWebpackPlugin = require(' copy-web pack-plugin ')；module.exports = { entry:'。/src/main.js '，输出:{ filename: 'bundle.js '，路径:path.join(__dirname，' dist ')，// publicPath: 'dist/' }，模块:{ rules: [ { test: /。css$/，使用:[ 'style-loader '，' css-loader' ] }，{ test: /。png$/，use: 'file-loader' } ] }，plugins: [ new CleanWebpackPlugin()，new HtmlWebpackPlugin({ title:' web pack Plugin Sample '，meta:{ viewport:' width = device-width ' }，template:'。/src/index.html' })，新HTMLWebPackPlugin({ filename:' about . html ' })，新CopyWebPackPlugin([' public/* * ']]})完成后，我们会重新打包。打包完成后，我们公共目录下的所有文件都会同时复制到输出目录下。 到目前为止，我们已经了解了几种常用的插件，这些插件一般适用于任何类型的项目。 在项目中使用框架还是使用哪个框架并不重要。 他们基本都会用。 所以在这之后，最好先把这些插件的官方说明过一遍，再看看它们还能有什么特殊用法，做到心中有数。 此外，社区中提供了数百个插件，您无需全部了解。当你有几个特殊需求时，在需求中提炼几个关键词，在github上搜索。 例如，如果我们想压缩输出图像，我会搜索imagemin webpack插件。 虽然每个插件的功能都不一样，但几乎所有插件的用法都差不多。