项目中常用的一些webpack的插件和用途

* 在前端开发中很多时候都会用到webpack来打包处理自己的项目，需要用到一些额外的插件包来实现一些开发需求，下面就是记录一些自己开发中常用的插件

一：clean-webpack-plugin（https://www.npmjs.com/package/clean-webpack-plugin）

　　1.1.功能用途：一般用来打包的时候删除之前打包的目录文件夹 ，不然会导致每次打包文件都累积了；

　　　　　　　　删除的是自己在webpack里面配置的 output 配置的输出目录文件夹；

　　　　　　　　可以在调用的时候配置一些参数，例如  verbose: true,；

　　1.2.使用方法：

　　　　　　

//需要先安装这个插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

//在webpack配置文件的plugins里面加上这个插件就可以了
...
plugins:[ new CleanWebpackPlugin() ]
...

　　

二：copy-webpack-plugin（https://www.npmjs.com/package/copy-webpack-plugin）

　　1.1.功能用途：一般用来打包的时候某些静态文件没有参与打包，去用这个插件把其复制到指定文件位置，将单个文件或整个目录（已存在）复制到构建目录。

　　1.2.使用方法：

 　　

const CopyWebpackPlugin = require('copy-webpack-plugin');
...
plugins:[ 
    new CopyWebpackPlugin([
            {
                from: path.join(__dirname, '/public/img'), //需要复制的静态文件
                to: path.join(__dirname, '/dist/img'), //要复制到哪个文件夹下面
                toType:'file' //文件类型
            }
        ])
]
...

三：html-webpack-plugin(https://www.npmjs.com/package/html-webpack-plugin)

　　1.1.功能用途：该插件可简化HTML文件的创建来结合打包后的文件放入这个静态html中。

　　1.2.使用方法：

四：extract-text-webpack-plugin（可以用于css的文件生成，和指定放入哪个文件夹下面）

五：webpack.optimize.UglifyJsPlugin

六：webpack.DefinePlugin

七：webpack.NoEmitOnErrorsPlugin