webpack中plugin的使用插件（plugin） Loader是用于特定的模块类型进行转换； Plugin可以用于

插件（plugin）

Loader是用于特定的模块类型进行转换；

Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等;

CleanWebpackPlugin

该插件帮助我们，在每次打包时，自动删除上一次打包后的文件。

安装：

 npm install clean-webpack-plugin -D

配置：

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

HtmlWebpackPlugin

在打包完成的文件夹（dist/）中生成一个index.html文件。

安装：

 npm install html-webpack-plugin -D

配置：

 const HtmlWebpackPlugin = require("html-webpack-plugin");
 
 module.exports={
     plugins: [new HtmlWebpackPlugin()]
 }

index.html是通过ejs模板生成的，我们也可以自定义模板来生成index.html文件。

创建一个模板文件（public/index.html）

 <!DOCTYPE html>
 <html lang="">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>
 </html>

对HtmlWebpackPlugin插件进行配置
配置DefinePlugin插件
配置CopyWebpackPlugin插件

完整配置：

 const {CleanWebpackPlugin} = require("clean-webpack-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const {DefinePlugin} = require("webpack");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 
 modult.exports={
     entry: "./src/index.js",
     output: {
         filename: "bundle.js",
         path: path.resolve(__dirname, "./dist"),
     },
     plugins: [
     new CleanWebpackPlugin(),
     new HtmlWebpackPlugin({
       //模板文件
       template: "./public/index.html",
       //模板中使用到的title属性
       title: "webpack项目",
     }),
     new DefinePlugin({
       //设置全局变量
       BASE_URL: "'./'",
     }),
     new CopyWebpackPlugin({
       patterns: [
         {
           //文件来源
           from: "public",
           //文件去向
           to: "./", //相对于output的path属性来定位的（./代表dist/）
           globOptions: {
             //如果使用了HtmlWebpackPlugin,模板和要copy的文件在同一个文件夹中，
             //必须设置该属性，忽略掉模板文件
             ignore: ["**/index.html"],
           },
         },
       ],
     }),
   ],
 }

DefinePlugin

DefinePlugin允许在编译时创建配置的全局常量，是一个webpack内置的插件。

配置：

 module.exports={
     plugins: [new HtmlWebpackPlugin()]
 }

CopyWebpackPlugin

在vue的打包过程中，如果我们将一些文件放到public的目录下，那么这个目录会被复制到dist文件夹中。

这个复制的功能，我们可以使用CopyWebpackPlugin来完成；

安装：

 npm install copy-webpack-plugin -D

接下来配置CopyWebpackPlugin即可：

复制的规则在patterns中设置；

from： 设置从哪一个源中开始复制；
to： 复制到的位置，可以省略，会默认复制到打包的目录下；
globOptions： 设置一些额外的选项，其中可以编写需要忽略的文件：

index.html：不需要复制，因为我们已经通过HtmlWebpackPlugin完成了index.html的生成；

mode

用于设置是开发模式还是生产模式。默认情况是生产模式。

选项	描述
`development`	会将 `DefinePlugin` 中 `process.env.NODE_ENV` 的值设置为 `development`. 为模块和 chunk 启用有效的名。
`production`	会将 `DefinePlugin` 中 `process.env.NODE_ENV` 的值设置为 `production`。为模块和 chunk 启用确定性的混淆名称，`FlagDependencyUsagePlugin`，`FlagIncludedChunksPlugin`，`ModuleConcatenationPlugin`，`NoEmitOnErrorsPlugin` 和 `TerserPlugin` 。
`none`	不使用任何默认优化选项

配置：

 module.exports={
     mode:'development'
 }

开发模式：（development）可以帮助我们寻找错误，定位到出错的文件。

生产模式：（production）代码会被压缩和丑化等一系列操作，我们是无法阅读的，出错后没有办法定位错误。

devtool

此选项控制是否生成，以及如何生成 source map。

如果为开发模式，默认使用的是eval选项。

常用值：

source-map： 整个 source map 作为一个单独的文件生成。它为 bundle 添加了一个引用注释，以便开发工具知道在哪里可以找到它。

eval ：每个模块都使用 eval() 执行，并且都有 //@ sourceURL。此选项会非常快地构建。主要缺点是，由于会映射到转换后的代码，而不是映射到原始代码（没有从 loader 中获取 source map），所以不能正确的显示行数。

配置：

 module.exports={
     devtool:'source-map'
 }