webpack05------plugins

htmlWebpackPlugin（打包之后执行）

作用：htmlWebpackPlugin会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个HTML文件中。

npm i html-webpack-plugin -D

用法：

plugins:[
    new htmlWebpackPlugin({
      template:'index.html'
    })
  ]

---

clean-webpack-plugin（打包之前执行）

删除指定文件夹（打包文件夹）里的文件，防止打包后还有原先的文件存在

根据版本问题使用的时候会出现报错情况：

报错：

TypeError: cleanWebpackPlugin is not a constructor

正确写法

抛错原写法
const cleanWebpackPlugin = require('clean-webpack-plugin') ;

正确写法
const {CleanWebpackPlugin}  = require('clean-webpack-plugin') ;

报错：

Error: clean-webpack-plugin only accepts an options object.

正确写法

 抛错原写法
 new CleanWebpackPlugin(['dist'])
 
 正确写法 不传任何参数
 new CleanWebpackPlugin()

总结写法：

const {CleanWebpackPlugin}  = require('clean-webpack-plugin') ;

plugins:[
    new CleanWebpackPlugin()
  ]

---

copyWebpackPlugin

一个完整的项目，不仅有开发依赖的各种文件需要打包上传到服务器上，也许还会有各种开发文档，项目中没引用过的图片、设计图、或者会有一些静态页面不需要编译，也要上传到服务器上，以方便预览。

npm i copy-webpack-plugin -D

new copyWebpackPlugin([
      {
        from:path.resolve(__dirname,'./src/static'),  目标目录
        to:'static' 生成目录
      }
    ])