經過這6個很棒的Webpack插件提升您的生產力

webpack插件用於執行更普遍的任務，例如包優化，資產管理和環境變量注入。

webpack自己創建在與webpack配置相同的插件系統上。根據你使用Webpack的方式，有多種使用插件的方法。

事不宜遲，這裏有六個很棒的webpack插件。

Webpack Bundle Analyzer

經過交互式的、可縮放的樹狀圖來可視化webpack輸出文件的大小。

該插件將幫助你您執行如下操做：

1. 瞭解你的包裏真正有什麼
2. 找出哪些模塊構成了捆綁軟件的最大組成部分
3. 查找錯誤到達的模塊
4. 優化你的Webpack捆綁包

安裝

# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn 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 example
var 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 用法的更多詳細信息，請參見此處。

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()]
};
複製代碼

---

文章首發於公衆號 《前端外文精選》，私信回覆：大禮包，送某網精品視頻課程網盤資料，準能爲你節省很多錢！