一. 认识插件Plugin

---

• Webpack的另一个核心是Plugin，官方有这样一段对Plugin的描述：
  • While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.
• 上面表达的含义翻译过来就是：
  • Loader是用于特定的模块类型进行转换
  • Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等

二. CleanWebpackPlugin

---

• 前面我们演示的过程中，每次修改了一些配置，重新打包时，都需要手动删除dist文件夹**：**

  • 我们可以借助于一个插件来帮助我们完成，这个插件就是CleanWebpackPlugin

• 首先，我们先安装这个插件：

  	npm i clean-webpack-plugin -D

• 之后在webpack.config.js中中配置：

  const { CleanWebpackPlugin } = require('clean-webpack-plugin') // 自动生成了
  const path = require('path')
  
  module.exports = {
    plugins: [
      new CleanWebpackPlugin() // 这里写，上面会自动生成，也可能是咱装的vscode插件的功能吧，反正就记录一下吧
    ]
  }

• 目前webpack官网中已经看不到CleanWebpackPlugin插件了，可以在npm官网中查看，所以可以在output中配置clean属性，在生成文件之前清空output目录

  module.exports = {
    //...
    output: {
      clean: true, // 在生成文件之前清空 output 目录
    }
  }

三. HtmlWebpackPlugin

---

1.HtmlWebpackPlugin

• 另外还有一个不太规范的地方：

  • 我们的HTML文件是编写在根目录下的，而最终打包的dist文件夹中是没有index.html文件的
  • 在进行项目部署的时，必然也是需要有对应的入口文件index.html
  • 所以我们也需要对index.html进行打包处理

• 对HTML进行打包处理我们可以使用另外一个插件：HtmlWebpackPlugin

  • 会自动在输出文件夹下生成一个index.html，同时自动将bundle.js使用defer属性引入进index.html中

      npm install html-webpack-plugin -D

• webpack.config.js中的配置：

      const HtmlWebpackPlugin = require('html-webpack-plugin')
  
      module.exports = {
        plugins: [
          new HtmlWebpackPlugin({
            title: '电商项目'
          })
        ]
      }

2.生成index.html分析

• 我们会发现，现在自动在dist文件夹中，生成了一个index.html的文件：

  • 该文件中也自动添加了我们打包的bundle.js文件
  

• 这个文件是如何生成的呢？

  • 默认情况下是根据ejs的一个模板来生成的
  • 在html-webpack-plugin的源码中，有一个default_index.ejs模块

3.自定义HTML模板

• 如果我们想在自己的模块中加入一些比较特别的内容：

  • 比如添加一个noscript标签，在用户的js被关闭（禁止使用js）时，给予响应的提示
  • 比如在开发vue或者react项目时，我们需要一个可以挂载后续组件的根标签 <div id="app"></div>

• 这个我们需要一个属于自己的index.html模块：

  

4.自定义模板数据填充

• 上面的代码中，会有一些类似这样的语法<% 变量 %>，这个是EJS模块填充数据的方式

• 在配置HtmlWebpackPlugin时，我们可以添加如下配置：

  • template：指定我们要使用的模块所在的路径
  • title：在进行htmlWebpackPlugin.options.title读取时，就会读到该信息

      const HtmlWebpackPlugin = require('html-webpack-plugin')
  
      module.exports = {
        plugins: [
          new HtmlWebpackPlugin({
            title: '电商项目',
            template: './src/index.html'
          })
        ]
      }

四. DefinePlugin

---

1. DefinePlugin的介绍

• 但是，这个时候编译还是会报错，因为在我们的模块中还使用到一个BASE_URL的常量：

  

• 这是因为在编译template模块时，有一个BASE_URL：

  • <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  • 但是我们并没有设置过这个常量值，所以会出现没有定义的错误

• 这个时候我们可以使用DefinePlugin插件

2. DefinePlugin的使用

• DefinePlugin允许在编译时创建配置的全局常量，是一个webpack内置插件（不需要单独安装）：

  const { DefinePlugin } = require('webpack')
  
  plugins: [
    new DefinePlugin({
      // 默认情况下有注入一个变量(process.env.NODE_ENV)，用来判断当前环境是生产环境还是开发环境
      BASE_URL: '"./"', // 外层引号里面的值（"./"）会被当成js代码执行，相当于通过eval的方式执行，将执行的结果作为这里的值，所以需要在里面再添加引号，这样就会被解析为字符串了
      later: "'later'" // later加引号不加引号都行，就是js里的对象的key
      // DefinePlugin注入的变量当前项目的其他位置都可以使用
    })
  ]

• 这个时候，编译template就可以正确的编译了，会读取到BASE_URL的值

• 注意：

  • 默认情况下有注入一个变量(process.env.NODE_ENV)，用来判断当前环境是生产环境还是开发环境
  • 外层引号里面的值（"./"）会被当成js代码执行，相当于通过eval的方式执行，将执行的结果作为这里的值，所以需要在里面再添加引号，这样就会被解析为字符串了
  • DefinePlugin注入的变量当前项目的其他位置都可以使用

五. mode模式配置

---

1.Mode配置

• 前面我们一直没有讲mode

• Mode配置选项，可以告知webpack使用相应模式的内置优化：

  • 默认值是production（什么都不设置的情况下）
  • 可选值有：'none' | 'development' | 'production'

  module.exports = {
    mode: 'development' //    设置为生成环境，会自动检查包的大小，如果包过大，会自动提出建议你限制包的大小，通过import()函数限制
  }

• 这几个选项有什么样的区别呢？

2.Mode配置代表更多

• 设置对应的mode值，相当于给webpack设置了很多的配置：