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功能

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