常用plugin
在这里对常用的Plugin做一下总结,方便我们找到自己所需的Plugin。
文件处理相关
- copy-webpack-plugin(https://www.npmjs.com/package/copy-webpack-plugin):复制指定文件到输出目录中的指定位置。
- clean-webpack-plugin(https://www.npmjs.com/package/clean-webpack-plugin):重新构建的时候清除上一此的构建结果。
- zip-webpack-plugin(https://www.npmjs.com/package/zip-webpack-plugin):输出构建资源的.zip格式的压缩包。
优化相关
- terser-webpack-plugin(https://www.npmjs.com/package/terser-webpack-plugin):压缩JavaScipt代码。
- optimize-css-assets-webpack-plugin(https://www.npmjs.com/package/optimize-css-assets-webpack-plugin):压缩css代码。
- mini-css-extract-plugin(https://www.npmjs.com/package/mini-css-extract-plugin):用于从JavaScriptd代码中抽离css代码,通过DOM操作加载到页面中。
- imagemin-webpack-plugin(https://www.npmjs.com/package/imagemin-webpack-plugin):压缩图片文件。
- dll-plugin(https://www.webpackjs.com/plugins/dll-plugin):构建动态链接库。
- html-webpack-plugin(https://www.npmjs.com/package/html-webpack-plugin):根据配置生成html文件。
- web-plugin-html(https://www.npmjs.com/package/web-webpack-plugin):功能与html-webpack-plugin类似,功能更加强大。
- serviceworker-webpack-plugin():为网页应用增加离线缓存功能。
- named-chunks-plugin(https://www.npmjs.com/package/serviceworker-webpack-plugin):通过固定chunkId,优化缓存。
- provide-plugin(https://www.webpackjs.com/plugins/provide-plugin):从环境中提供的全局变量中加载模块,从而不同导入对应的文件。
- i18n-webpack-plugin(https://www.npmjs.com/package/i18n-webpack-plugin):使网页支持国际化。
- ignore-plugin(https://www.webpackjs.com/plugins/ignore-plugin/):使webpck忽略对部分文件的处理。