webpack常用插件及其作用

webpack作为一个打包工具，其plugin（插件）机制在很大程度上扩展了其功能。本文总结了在开发中常用的一些插件及其作用。通过在webpack配置的plugins数组中添加插件的实例，我们便可以在webpack的编译过程中的某个生命周期调用该插件。另外webpack文档中也给出了丰富的插件集合，详情见webpack plugins

html-webpack-plugin

作用：根据模板动态的生成html，在编译发生变化的同时，动态生成html，并将编译生成的目标js文件插入html中。

备注：该插件在生产环境下使用，在打包生成最后的bundle文件后，自动将bundle文件插入到html中。

extract-text-webpack-plugin

作用：从最后的bundle.js中将css文件抽取成一个独立的css文件，并在html的head中引用

备注：

独立的css的文件有以下好处：

• 更少的style标签
• CSS SourceMap (需配合SourceMap使用)
• 并行的JS和CSS请求，在CSS很大的情况下效果明显
• CSS单独缓存

CommonsChunkPlugin

作用：提取多个入口的文件的公共部分到独立的模块

备注：通过将公共模块拆分出来，最终合成的文件能够在最开始的时候加载一次，后续的使用直接在缓存中读取。

UglifyJsPlugin

作用： JS代码压缩

备注： 该插件提供了两种不同的使用方式，一种是webpack内置版本，使用时直接new webpack.optimize.UglifyJsPlugin()，另一种需要独立安装，npm install uglifyjs-webpack-plugin --save-dev。两种方式不同的区别在于，后者可以控制其内部依赖的UglifyJs的版本。另外该插件不支持ES6的代码压缩，如需支持ES6的代码压缩，需要安装支持ES6压缩的UglifyJs版本。

DefinePlugin

作用：构建全局常量，用于在编译期间替换

HotModuleReplacementPlugin

作用：开启HMR功能

备注：该插件仅限于在开发环境中使用