插件 · 前端

| Name | Description | | --- | --- | | [`AggressiveSplittingPlugin`](https://www.webpackjs.com/plugins/aggressive-splitting-plugin) | 將原來的 chunk 分成更小的 chunk | | [`BabelMinifyWebpackPlugin`](https://www.webpackjs.com/plugins/babel-minify-webpack-plugin) | 使用[babel-minify](https://github.com/babel/minify)進行壓縮 | | [`BannerPlugin`](https://www.webpackjs.com/plugins/banner-plugin) | 在每個生成的 chunk 頂部添加 banner | | [`CommonsChunkPlugin`](https://www.webpackjs.com/plugins/commons-chunk-plugin) | 提取 chunks 之間共享的通用模塊 | | [`CompressionWebpackPlugin`](https://www.webpackjs.com/plugins/compression-webpack-plugin) | 預先準備的資源壓縮版本，使用 Content-Encoding 提供訪問服務| | [`ContextReplacementPlugin`](https://www.webpackjs.com/plugins/context-replacement-plugin) | 重寫`require`表達式的推斷上下文 | | [`CopyWebpackPlugin`](https://www.webpackjs.com/plugins/copy-webpack-plugin) | 將單個文件或整個目錄復制到構建目錄 | | [`DefinePlugin`](https://www.webpackjs.com/plugins/define-plugin) | 允許在編譯時(compile time)配置的全局常量 | | [`DllPlugin`](https://www.webpackjs.com/plugins/dll-plugin) | 為了極大減少構建時間，進行分離打包 | | [`EnvironmentPlugin`](https://www.webpackjs.com/plugins/environment-plugin) | [`DefinePlugin`](https://www.webpackjs.com/plugins/define-plugin)中`process.env`鍵的簡寫方式 | | [`ExtractTextWebpackPlugin`](https://www.webpackjs.com/plugins/extract-text-webpack-plugin) | 從 bundle 中提取文本（CSS）到單獨的文件 | | [`HotModuleReplacementPlugin`](https://www.webpackjs.com/plugins/hot-module-replacement-plugin) | 啟用模塊熱替換(Enable Hot Module Replacement - HMR) | | [`HtmlWebpackPlugin`](https://www.webpackjs.com/plugins/html-webpack-plugin) | 簡單創建 HTML 文件，用于服務器訪問 | | [`I18nWebpackPlugin`](https://www.webpackjs.com/plugins/i18n-webpack-plugin) | 為 bundle 增加國際化支持 | | [`IgnorePlugin`](https://www.webpackjs.com/plugins/ignore-plugin) | 從 bundle 中排除某些模塊 | | [`LimitChunkCountPlugin`](https://www.webpackjs.com/plugins/limit-chunk-count-plugin) | 設置 chunk 的最小/最大限制，以微調和控制 chunk | | [`LoaderOptionsPlugin`](https://www.webpackjs.com/plugins/loader-options-plugin) | 用于從 webpack 1 遷移到 webpack 2 | | [`MinChunkSizePlugin`](https://www.webpackjs.com/plugins/min-chunk-size-plugin) | 確保 chunk 大小超過指定限制 | | [`NoEmitOnErrorsPlugin`](https://www.webpackjs.com/plugins/no-emit-on-errors-plugin) | 在輸出階段時，遇到編譯錯誤跳過 | | [`NormalModuleReplacementPlugin`](https://www.webpackjs.com/plugins/normal-module-replacement-plugin) | 替換與正則表達式匹配的資源 | | [`NpmInstallWebpackPlugin`](https://www.webpackjs.com/plugins/npm-install-webpack-plugin) | 在開發時自動安裝缺少的依賴 | | [`ProvidePlugin`](https://www.webpackjs.com/plugins/provide-plugin) | 不必通過 import/require 使用模塊 | | [`SourceMapDevToolPlugin`](https://www.webpackjs.com/plugins/source-map-dev-tool-plugin) | 對 source map 進行更細粒度的控制 | | [`EvalSourceMapDevToolPlugin`](https://www.webpackjs.com/plugins/eval-source-map-dev-tool-plugin) | 對 eval source map 進行更細粒度的控制 | | [`UglifyjsWebpackPlugin`](https://www.webpackjs.com/plugins/uglifyjs-webpack-plugin) | 可以控制項目中 UglifyJS 的版本 | | [`ZopfliWebpackPlugin`](https://www.webpackjs.com/plugins/zopfli-webpack-plugin) | 通過 node-zopfli 將資源預先壓縮的版本 | | [ClosureWebpackPlugin](https://www.webpackjs.com/plugins/closure-webpack-plugin/) | | | [ComponentWebpackPlugin](https://www.webpackjs.com/plugins/component-webpack-plugin/) | | | [ModuleConcatenationPlugin](https://www.webpackjs.com/plugins/module-concatenation-plugin/) | | | NamedModulesPlugin | 當開啟[HMR](https://www.webpackjs.com/guides/hot-module-replacement)的時候使用該插件會顯示模塊的相對路徑，建議用于開發環境 | | [PrefetchPlugin](https://www.webpackjs.com/plugins/prefetch-plugin/) | 預取出普通的模塊請求(module request)，可以讓這些模塊在他們被`import`或者是`require`之前就解析并且編譯。使用這個預取插件可以提升性能。可以多試試在編譯前記錄時間(profile)來決定最佳的預取的節點 | | [ProfilingPlugin](https://v4.webpack.docschina.org/plugins/profiling-plugin/) | 生成包含插件執行時間的Chrome配置文件。`events.json`默認情況下輸出文件。可以使用`outputPath`選項提供自定義文件路徑 | | ProgressPlugin | 報告編譯進度 | | SplitChunksPlugin | | | [WatchIgnorePlugin](https://www.webpackjs.com/plugins/watch-ignore-plugin/) | 無視指定的文件。換句話說，當處于[監視模式(watch mode)](https://www.webpackjs.com/configuration/watch)下，符合給定地址的文件或者滿足給定正則表達式的文件的改動不會觸發重編譯 | | HashedModuleIdsPlugin | 該插件會根據模塊的相對路徑生成一個四位數的hash作為模塊id, 建議用于生產環境 | | MiniCssExtractPlugin | 該插件將CSS提取到單獨的文件中。它為每個包含CSS的JS文件創建一個CSS文件。它支持CSS和SourceMap的按需加載 | | [StylelintWebpackPlugin](https://v4.webpack.docschina.org/plugins/stylelint-webpack-plugin/) | Webpack的Stylelint插件注意與stylelint-loader的差異 | | [TerserWebpackPlugin](https://v4.webpack.docschina.org/plugins/terser-webpack-plugin/) | 該插件使用[terser](https://github.com/terser-js/terser)來縮小JavaScript | | [ webpack內部插件](https://v4.webpack.docschina.org/plugins/internal-plugins/) | | | html-webpack-plugin | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |