03、webpack中常用的plugins

前言

本篇总结是webpack构建系列之webpack中常用的Plugins。

在这篇总结里，主要是对一些项目中基本上都需要配置到的常用的Plugins进行梳理总结。当然，更多细节还是需要查阅webpack官方文档。

CleanWebpackPlugin

安装：npm install clean-webpack-plugin —save-dev

使用：

//webpack.config.js  
const { CleanWebpackPlugin } = require('clean-webpack-plugin');  
const HtmlWebpackPlugin = require('html-webpack-plugin');  
plugins: [  
    new CleanWebpackPlugin(),  
    new HtmlWebpackPlugin({  
      title: "coderwhy webpack",  
      template: "./public/index.html"  
    }),  
]

CleanWebpackPlugin：当我们npm run build打包时，会将文件都打包到output出口文件夹里。但是多次打包，更新的文件就会覆盖，但是我们不再需要的文件，却仍旧存在。这就很不合理。所以需要用cleanWebpackPlugin来帮助我们删除掉输出文件夹下不需要的文件。

HtmlWebpackPlugin

安装：npm instalhtml-webpack-plugin —save-dev

使用：

//webpack.config.js  
const { CleanWebpackPlugin } = require('clean-webpack-plugin');  
const HtmlWebpackPlugin = require('html-webpack-plugin');  
plugins: [  
    new CleanWebpackPlugin(),  
    new HtmlWebpackPlugin({  
      title: "coderwhy webpack",  
      template: "./public/index.html"  
    }),  
]

HtmlWebpackPlugin：在之前的打包中，我们是可以把依赖到的模块都打包到output文件夹下的，但是却少了一个非常重要的文件：index.html。要知道，我们到时候部署直接就部署output文件夹就可以了。但是少了html文件，肯定是用不了的。那我们得手动加一个html文件然后Script标签手动引入打包出来的js文件？这显然很不合理。因此就可以使用HtmlWebpackPlugin来帮助我们完成。

HtmlWebpackPlugin是怎么实现的呢？
HtmlWebpackPlugin帮助我们自动生成index.html文件（并且会自动帮我们引入打包后的js文件），但是这个html文件又是哪里来的呢？我们可以到node_modules文件夹下找到HtmlWebpackPlugin的源码，然后我们就可以发现，原来HtmlWebpackPlugin是引用了ejs模板（一个基本的html文件模板）。下边让我们来看一看ejs模板：

既然html的文件是依据ejs模块生成，那我们能不能使用自己的模板呢？
毕竟我们也是需要加自己的东西的，比如说我们需要使用cnd外链的方式导入第三方库，或者在vue项目里，所有的组件都会挂载到一个

那我们看看vue-cli是怎么做的吧。打开一个用vue-cli搭建的项目，我们就可以发现vue-cli是在public文件夹下写了一个index.html模板，然后webpack.config.js里配置了HtmlWebpackPlugin的options里component。这样就可以使用自己的模板创建index.html了。

其它注意点：

1. plugin都是使用new去生成的：看一下plugin的源码就可以发现每一个plugin都是一个类，所以需要用new关键字去生成plugin。
2. 导入时有的用到了解构赋值有的不需要：看一下plugin的源码，发现每一个plugin的导出方式都不太一样。需要根据导出方式决定要不要使用解构。

CopyWebpackPlugin

在上一节学习vue-cli的打包过程时，发现vue项目会把一些放到public的目录下的文件，也复制到output出口文件夹dist中。它是怎么做到的呢？其实它是使用了copyWebpackPlugin来实现的。

安装：
npm install copy-webpack-plugin -D

使用：

//webpack.config.js  
const { CleanWebpackPlugin } = require('clean-webpack-plugin');  
const HtmlWebpackPlugin = require('html-webpack-plugin');  
const CopyWebpackPlugin = require('copy-webpack-plugin');  
plugins: [  
    new CleanWebpackPlugin(),  
    new HtmlWebpackPlugin({  
      title: "coderwhy webpack",  
      template: "./public/index.html"  
    }),  
    new CopyWebpackPlugin({  
      patterns: [  
        {  
          //from:把from配置的文件夹下的文件复制到output出口文件夹下  
          from: "public",  
          globOptions: {  
            //忽略哪些文件，**表示from配置的文件夹  
            ignore: [  
              "**/index.html",  
              "**/.DS_Store",  
              "**/abc.txt"  
            ]  
          }  
        }  
      ]  
    })  
]