56 webpack中常用的插件

常用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忽略对部分文件的处理。