《八》Webpack 中的 Plugin

Plugin：扩展插件。是用来扩展 Webpack 的功能的，可以贯穿 Webpack 的整个生命周期，在特定时机注入扩展逻辑，执行更广泛的任务，比如打包优化、资源管理、环境注入等。

CleanWebpackPlugin 插件:

运行 webpack 命令进行打包，最终会生成一个文件夹。当修改了代码重新进行打包后：

1. 如果生成的文件在输出的文件夹下已有同名的文件，Webpack 会进行覆盖。
2. 如果生成的文件是新的文件，Webpack 会将其添加到输出的文件夹下。
3. 如果输出的文件夹下有旧的文件，但是并没有生成的新的同名的文件，Webpack 会对其进行保留，不会删除。

因此，之前都是每次运行 webpack 命令进行打包之前，手动删除打包输出的文件。可以使用 CleanWebpackPlugin 插件来解决。

使用 CleanWebpackPlugin 插件：

CleanWebpackPlugin 插件：在打包之前自动删除之前打包输出的文件。

1. 安装 CleanWebpackPlugin 插件：npm install clean-webpack-plugin --save-dev。
2. 在 Webpack 配置文件中进行配置。

   const path = require('path')
   // 导入 CleanWebpackPlugin
   const {CleanWebpackPlugin} = require('clean-webpack-plugin')
   
   module.exports = {
     // 必须明确配置 output.path，否则 CleanWebpackPlugin 会找不到要清除输出文件夹的地方
     output: {
       path: path.resolve(__dirname, 'dist'),
     },
     plugins: [
       // 使用 CleanWebpackPlugin。Plugin 都是一个一个的类
       new CleanWebpackPlugin()
     ]
   }
   

HtmlWebpackPlugin 插件：

之前是手动创建了一个 HTML 文件，并手动将打包后的 JS 文件引入了进去。可以使用 HtmlWebpackPlugin 插件来自动生成 HTML 文件。

使用 HtmlWebpackPlugin 插件：

HtmlWebpackPlugin 插件：在打包后生成的文件下自动生成一个 HTML 文件，并将打包后的资源自动引入。

HtmlWebpackPlugin 插件底层是根据 ejs 模板来生成 HTML 文件的。

1. 安装 HtmlWebpackPlugin 插件：npm install html-webpack-plugin --save-dev。
2. 在 webpack.config.js 配置文件中进行配置。

   // 导入 HtmlWebpackPlugin
   const HtmlWebpackPlugin = require('html-webpack-plugin')
   
   module.exports = {
     plugins: [
       // 使用 HtmlWebpackPlugin
       new HtmlWebpackPlugin()
     ]
   }
   

运行 webpack 命令进行打包，会发现，在打包生成的文件夹下自动生成的了index.html 文件。

配置 HtmlWebpackPlugin 插件自动生成的 HTML 文件的 <title> 标签的值：

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      // 配置使用 HtmlWebpackPlugin 插件自动生成的 HTML 文件的 <title> 标签的值。默认是 Webpack App
      title: '测试',
    })
  ]
}

运行 webpack 命令进行打包，会发现，在打包生成的文件夹下自动生成的 index.html 文件中 <title> 标签的值变为了测试。

配置 HtmlWebpackPlugin 插件根据自定义 HTML 模板来生成 HTML 文件：

1. 新建 public/index.html 文件并编写代码。
2. 在 webpack.config.js 配置文件中进行配置。

   const HtmlWebpackPlugin = require('html-webpack-plugin')
   
   module.exports = {
     plugins: [
       new HtmlWebpackPlugin({
         // HtmlWebpackPlugin 插件将会根据 template 属性指定的 HTML 文件生成打包后的 HTML 文件
         template: './public/index.html'
       })
     ]
   }
   

运行 webpack 命令进行打包，会发现，HtmlWebpackPlugin 插件根据 public/index.html 在打包生成的文件夹下自动生成了 index.html 文件。

CopyWebpackPlugin 插件：

在 public 文件夹下新增 favicon.png 图片。 运行 webpack 命令进行打包，想要实现的效果是，将 pubilc 文件夹下除了 index.html 文件外的其他内容全部复制到 Webpack 打包生成的文件夹下。

使用 CopyWebpackPlugin 插件：

CopyWebpackPlugin 插件：用于复制文件和目录。

1. 安装 CopyWebpackPlugin 插件：npm install copy-webpack-plugin --save-dev。
2. 在 webpack.config.js 配置文件进行配置。

   const path = require('path')
   // 导入 CopyWebpackPlugin
   const CopyWebpackPlugin = require('copy-webpack-plugin')
   
   module.exports = {
     plugins: [
       // 使用 CopyWebpackPlugin
       new CopyWebpackPlugin({
         // 匹配要复制的资源，复制到哪个地方。patterns 是一个数组，可以匹配多个对象
         patterns: [
           {
             // 要复制资源的位置
             from: 'public',
             // 复制到哪个地方。如果 to 的属性值是相对路径，将会相对于 Webpack 打包生成的目录；如果是绝对路径，将直接使用指定的路口；如果不明确设置 to 属性，将默认复制到 Webpack 打包生成的目录下
             to: path.resolve(__dirname, 'dist'),
             globOptions: {
               // 复制时要忽略的文件。前面必须加 **/，否则将会忽略失败
               ignore: [
                 '**/index.html'
               ]
             }
           }
         ]
       })
     ]
   }
   

运行 webpack 命令进行打包，会发现， public 文件夹下除了 index.html 文件外的其他内容已经全部复制到 Webpack 打包生成的文件夹下了。

DefinePlugin 插件：

DefinePlugin 是 Webpack 内置的一个插件，不需要单独安装。允许在 Webpack 编译时创建全局常量，就可以在项目中全局使用。

1. 在 webpack.config.js 配置文件中进行配置。

   // 导入 DefinePlugin
   const {DefinePlugin} = require('webpack')
   
   module.exports = {
     plugins: [
       // 使用 DefinePlugin
       new DefinePlugin({
         // 定义全局常量 ENV
         // 由于 DefinePlugin 插件直接执行文本替换，给定的值必须包含字符串本身的引号，否则的话替换后就会成为变量名而非字符串值。因此，可以使用 '"production"' 或者 JSON.stringify('production')
         // ENV: '"production"',
         ENV: JSON.stringify('production')
       })
     ]
   }
   

2. 在 src/js/component.js 中编写以下代码。

   // 使用全局常量 ENV
   console.log(ENV)
   

运行 webpack 命令进行打包，打开浏览器，可以看到有 ENV 的打印信息。

ProvidePlugin 插件：

例如：现在项目中依赖一个第三方库，这个第三方库本身又依赖 lodash，但是它默认全局已经存在了 lodash，因此没有对 lodash 进行导入，那么运行起来就会报错，此时就需要通过 ProvidePlugin 来实现 shimming 效果。

shimming：垫片。是某一类功能的统称，给代码填充一些垫片来处理一些问题。
Webpack 官方并不推荐随意使用 shimming，因为 Webpack 的理念是编写具有封闭性的、不存在隐含依赖的、彼此隔离的模块，从而使前端开发更加模块化，但是 shimming 会使得模块的依赖关系不明确。

使用 ProvidePlugin 插件：

ProvidePlugin：是 Webpack 内置的一个插件。用于当在代码中找不到某一个变量时，自动导入对应的库。可以传入一个对象，其中的 key 是在代码中使用的库的名称，value 是要自动导入的库的名称。

1. 安装 lodash。
2. 新建 src/index.js，并编写代码。

   // 使用了  ldash，但是并没有引入
   console.log(_.join(['a', 'b', 'c'], '/'))
   

3. 在 webpack.config.js 进行配置。

   const webpack = require('webpack')
   
   module.exports = {
     plugins: [
       // 当在代码中找不到变量 _ 时，会自动引入 lodash 库
       new webpack.ProvidePlugin({
         _: 'lodash'
       })
     ]
   }
   

4. 新建 index.html，并编写代码。

   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
   </head>
   <body>
     <script src="./dist/main.js"></script>
   </body>
   </html>
   

5. 运行 webpack 命令进行打包，并在浏览器中运行，会发现可以正常运行。