4. Plugin

Plugin 和 Loader 区别

Loader 是用于特定的模块类型进行转换，Plugin 可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等。

CleanWebpackPlugin

作用：重新打包时自动删除原来的 dist 文件夹
安装:npm install clean-webpack-plugin -D  配置:

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
   plugins: [
       new CleanWebpackPlugin()
   ] 
}

HtmlWebpackPlugin

作用：

1. 自动在打包后的目录中生成了 html 文件
2. html 文件中自动引入了 js 文件

安装 npm install html-webpack-plugin -D  配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');
module: {
    plugins: [
        new HtmlWebpackPlugin({
            // 填充语法<% 变量 %>
            // title：在进行htmlWebpackPlugin.options.title读取
            title: "webpack项目",
            // 要使用的模块所在的路径
            template: "./public/index.html" // 指定自定义的HTML模板
       })
    ]
}

html 中会有 类似这样的语法<% 变量 %>，这个是EJS模块填充数据的方式。

html 的默认模板是来自 HtmlWebpackPlugin 包的 default_index.ejs 模板，vue 是使用了自定义模板。

DefinePlugin

可以处理模板中的 <link rel="icon" href="<%= BASE_URL %>favicon.ico">，定义全局常量 BASE_URL，DefinePlugin允许在编译时创建配置的全局常量，是一个webpack内置的插件（不需要单独安装）。

const { DefinePlugin } = require('webpack');
module: {
    plugins: [
        new DefinePlugin({
          BASE_URL: '"./"'
        })
    ]
}

CopyWebpackPlugin

vue的打包过程中，如果我们将一些文件放到public的目录下，那么这个目录会被复制到dist文件夹中
将一些文件 copy 到 public 的目录
安装：npm install copy-webpack-plugin -D

• from ：设置从哪一个源中开始复制
• to：复制到的位置，可以省略，会默认复制到打包的目录下
• globOptions:设置一些额外的选项，其中可以编写需要忽略的文件
  .DS_Store：mac目录下回自动生成的一个文件
  index.html：也不需要复制，因为我们已经通过HtmlWebpackPlugin完成了index.html的生成