文件处理上

　　1、HtmlWebpackPlugin

　　包名：html-webpack-plugin

　　该插件将为你生成一个 HTML 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。

　　2、CleanWebpackPlugin

　　包名：clean-webpack-plugin

　　用于在打包前清理上一次项目生成的 bundle文件。默认情况下，此插件将删除webpack的Output.Path目录中的所有文件，以及在每次成功重建后所有未使用的webpack资源(assets)。如果使用的webpack版本是 4 以上的，默认 清理 <project_dir>/dist/下的文件。

　　3、MiniCssExtractPlugin

　　包名：mini-css-extract-plugin

　　将 css 成生文件，而非内联 。该插件的主要是为了抽离 css 样式,防止将样式打包在 js 中引起页面样式加载错乱的现象。支持按需加载 css 和 sourceMap

　　4、HotModuleReplacementPlugin

　　包名：HotModuleReplacementPlugin

　　由 webpack 自带。在对CSS / JS文件进行修改时，可以立即更新浏览器(部分刷新)。依赖于 webpack-dev-server

　　5、ImageminPlugin

　　包名：imagemin-webpack-plugin

　　批量压缩图片。

　　6、PurifyCSSPlugin

　　包名：purifycss-webpack

　　从CSS中删除未使用的选择器(删除多余的 css 代码)。和 extract-text-webpack-plugin 一起使用

　　7、OptimizeCSSAssetsPlugin

　　包名：optimize-css-assets-webpack-plugin

　　压缩css文件。

　　8、CssMinimizerPlugin

　　包名： css-minimizer-webpack-plugin

　　压缩css文件。**用于 webpack 5 **。

　　9、UglifyJsPlugin

　　包名：uglifyjs-webpack-plugin

　　压缩js文件。

　　10、ProvidePlugin

　　包名：ProvidePlugin

　　由 webpack 自带。自动加载模块，而不必在任何地方import或require它们。例如：new webpack.ProvidePlugin({$: 'jquery',React: 'react'})

　　11、SplitChunksPlugin

　　包名：-

　　在webapck配置中的optimization字段中配置。cacheGroups 是关键，将文件提取打包成公共模块，像 抽取 node_modules里的文件。

　　12、CompressionPlugin

　　包名：compression-webpack-plugin

　　启用 gzip 压缩。

　　13、CopyWebpackPlugin

　　包名： copy-webpack-plugin

　　将已存在的单个文件或整个目录复制到构建目录中。多用于 将静态文件 因在打包时 webpack 并不会帮我们拷贝到 dist 目录 拷贝到 dist 目录

　　14、DefinePlugin

　　包名：DefinePlugin

　　由 webpack 自带。设置全局变量。如：new webpack.DefinePlugin({'process.env.NODE_ENV': JSON.stringify('production')})

　　打包速率上

　　1、DllPlugin

　　包名：DllPlugin

　　由 webpack 自带。dllplugin和dllreferenceplugin提供了拆分捆绑包的方法，这些方式可以大大提高构建时间性能。

　　2、DLLReferencePlugin

　　包名：DLLReferencePlugin

　　由 webpack 自带。它引用了仅需要预先构建的依赖项的 DLL-only-Bundle。

　　3、ParallelUglifyPlugin

　　包名：webpack-parallel-uglify-plugin

　　开启多个子进程，把对多个文件压缩的工作分别给多个子进程去完成。减少构建时间。

　　4、HappyPack

　　包名：happypack

　　让 webpack 把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。提升 构建 速度

上一篇

一文了解什么是协商缓存和强缓存？

下一篇

前端面试题——你对nodejs了解多少？