webpack外掛用於執行更廣泛的任務，例如包優化，資產管理和環境變數注入。

webpack本身建立在與webpack配置相同的外掛系統上。根據你使用Webpack的方式，有多種使用外掛的方法。

事不宜遲，這裡有六個很棒的webpack外掛。

Webpack Bundle Analyzer

通過互動式的、可縮放的樹狀圖來視覺化webpack輸出檔案的大小。

該外掛將幫助你您執行以下操作：

了解你的包裡真正有什麼找出哪些模組構成了捆綁軟體的最大組成部分查詢錯誤到達的模組優化你的Webpack捆綁包

安裝

# NPMnpm install --save-dev webpack-bundle-analyzer# Yarnyarn add -D webpack-bundle-analyzer

使用

const BundleAnalyzerPlugin = require('webpack-bundle analyzer');module.exports = { plugins: [ new BundleAnalyzerPlugin() ]}offline-plugin

offline-plugin 旨在為webpack專案提供離線體驗。

該外掛使用 ServiceWorker 和 AppCache 作為後臺引擎。只需將這個外掛包含在 webpack.config 中，並將隨附的執行時包含在客戶端指令碼中，通過快取所有（或一些）webpack輸出資產，你的專案將變為離線狀態。

安裝

npm install offline-plugin [--save-dev]

使用

首先，在您的webpack.config中例項化外掛：

// webpack.config.js examplevar OfflinePlugin = require('offline-plugin');module.exports = { // ... plugins: [ // ... other plugins // 如果OfflinePlugin是最後新增的外掛，那就更好了 new OfflinePlugin() ] // ...}

並且，您可以選擇使用選項進行配置。然後，將執行時間新增到entry檔案（通常是entry目）中：

require('offline-plugin/runtime').install();

ES6/Babel/TypeScript

import * as OfflinePluginRuntime from 'offline-plugin/runtime';OfflinePluginRuntime.install();

有關 TypeScript 用法的更多詳細資訊，請參見此處。

https://github.com/NekR/offline-plugin/blob/master/docs/typescript.md

webpack-pwa-manifest

webpack-pwa-manifest 將自己描述為“用於Webpack的漸進式Web App清單生成器，具有自動圖示大小調整和指紋識別支援。”

webpack-pwa-manifest 是一個webpack外掛，可為您的漸進式Web應用程式生成 manifest.json。

如果您在配置上使用注入，請確保 HtmlWebpackPlugin 出現在plugins 陣列中的 WebpackPwaManifest 之前。

特徵

自動圖示大小調整圖示指紋清單指紋HTML上的自動清單注入熱過載支援

安裝

npm install --save-dev webpack-pwa-manifest

使用

在你的 webpack.config.js 中：

import WebpackPwaManifest from 'webpack-pwa-manifest'...plugins: [ new WebpackPwaManifest({ name: 'My Progressive Web App', short_name: 'MyPWA', description: 'My awesome Progressive Web App!', background_color: '#ffffff', crossorigin: 'use-credentials', // 可以是null、use-credentials還是anonymous icons: [ { src: path.resolve('src/assets/icon.png'), sizes: [96, 128, 192, 256, 384, 512] // 多個大小 }, { src: path.resolve('src/assets/large-icon.png'), size: '1024x1024' // 你還可以使用specification模式 } ] })]imagemin-webpack-plugin

imagemin-webpack-plugin 是一個webpack外掛，用於使用imagemin壓縮影象。

安裝

npm install imagemin-webpack-plugin

使用

import ImageminPlugin from 'imagemin-webpack-plugin'module.exports = { plugins: [ // 確保外掛位於新增影象的外掛之後 new ImageminPlugin({ disable: process.env.NODE_ENV !== 'production', // 在開發過程中禁用 pngquant: { quality: '95-100' } }) ]}prerender-spa-plugin

prerender-spa-plugin 將靜態HTML預渲染到單頁應用程式中。

該外掛的目的是提供一個簡單的預渲染解決方案，該解決方案可輕鬆擴充套件並適用於任何使用webpack構建的網站或單頁應用。

什麼是預渲染？

最近，伺服器端渲染（SSR）席捲了JavaScript前端世界。事實上，你現在可以先在伺服器上渲染你的網站和應用程式，然後再發送給你的客戶，這絕對是一個革命性的想法（在JS客戶端應用程式流行起來之前，每個人都在做的事情，這完全不是在JS客戶端應用程式流行起來之前的事情）。

然而，過去對PHP、ASP、JSP（等等）網站的批評，現在對伺服器端渲染也是一樣的。它的速度很慢，相當容易崩潰，而且難以正確實現。

問題是，不管別人怎麼說，你可能不需要SSR。你可以通過使用預分發來獲得它幾乎所有的優點(沒有缺點)。預渲染基本上是啟動一個無頭瀏覽器，載入應用程式的路由，並將結果儲存到一個靜態HTML檔案。然後，你可以將其與以前使用的任何靜態檔案服務解決方案一起使用。它僅適用於HTML5導航等。無需更改程式碼或新增伺服器端渲染解決方法。

安裝

yarn add -D prerender-spa-plugin

基本使用

const path = require('path')const PrerenderSPAPlugin = require('prerender-spa-plugin')module.exports = { plugins: [ ... new PrerenderSPAPlugin({ // 必需的——指向webpack輸出應用程式的prerender路徑。 staticDir: path.join(__dirname, 'dist'), // 必需的 - Routes to render. routes: [ '/', '/about', '/some/deep/nested/route' ], }) ]}duplicate-package-checker-webpack-plugin

這是一個webpack外掛，當你的捆綁包包含同一軟體包的多個版本時，會發出警告。

為什麼？

由於不同的軟體包版本，單個軟體包可能多次包含在webpack捆綁軟體中。這種情況可能會在沒有任何警告的情況下發生，從而導致捆綁軟體中出現額外的膨脹，並可能導致難以發現的錯誤。

該外掛會在這種情況下警告你，以最大程度地減少捆綁包的大小，並避免由於意外的重複包裝而導致的錯誤。

安裝

npm install duplicate-package-checker-webpack-plugin --save-dev

使用

將外掛新增到你的webpack配置中：

const DuplicatePackageCheckerPlugin = require("duplicate-package-checker-webpack-plugin");module.exports = {  plugins: [new DuplicatePackageCheckerPlugin()]};

如果對你有所啟發和幫助，可以點個關注、收藏、轉發，也可以留言討論，這是對作者的最大鼓勵。

作者簡介：Web前端工程師，全棧開發工程師、持續學習者。

#前端開發# #JavaScript#