7-webpack常用小插件

下面记录几个webpack常用的小插件的功能和用法：

1-clean-webpack-plugin -D 在每次编译可自动删除 dist 文件夹，打包后就可以得到纯新的 dist 文件

• 命令安装插件
• config文件plugins[]配置属性，需要删除的文件夹，代码如下：

var CleanWebpackPlugin = require("clean-webpack-plugin");  //顶部引入
  plugins:[
        new HTMLWebpackPlugin({
            template:'./index.html',
            filename:'index.html',
        }),
       new CleanWebpackPlugin('./dist'),        //需要清除的 dist 目录
    ],

2-copy-webpack-plugin -D 插件可以在打包时同步复制文件 到指定的文件夹

• 命令安装插件
• config文件plugins[]配置属性，传入数组，代码如下：

  plugins:[
        new HTMLWebpackPlugin({
            template:'./index.html',
            filename:'index.html',
        }),
       new CleanWebpackPlugin('./dist'),        //清除dist 目录
        new CopyWebpackPlugin([
            {from:'./txt',to:'./copy'}
        ])
    ],

3-banner-plugin

是 webpack 内置插件 ，只需要引入webpack 主插件，无需单独安装

作用：在输出的打包压缩的JS代码内嵌入版权识别注释。

• 在配置文件顶部引入 webpack ：const webpack=require('webpack')

• 在plugin[ ]内部 new webpack.BannerPlugin('made by zhangjian 2019') 设置声明内容
  

  bannerPlugin.png