【譯】你不得不知道的6個超有用的Webpack插件

原文：Boost Your Productivity With These 6 Awesome webpack Plugins

webpack plugins能夠被用來作一些諸如打包代碼優化，資源管理，環境變量注入等一系列有用的工做。 本文將會爲你們介紹6個超有用的webpack插件。

Webpack Bundle Analyzer

這個插件會將webpack的輸出文件進行可視化展現，展現的樹形結構能夠進行放大縮小等一系列交互操做。

github地址

這個插件能夠幫你作如下事情：

• 看清你最後打包的代碼都包含了什麼東西
• 找到體積最大的內容
• 發現被錯誤打包的代碼
• 優化webpack的打包體積

安裝

# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer
複製代碼

使用

在你的webpack配置中使用該插件：

const BundleAnalyzerPlugin = require('webpack-bundle analyzer');
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}
複製代碼

offline-plugin

offline-plugin能夠用來爲你的項目提供離線（offline）的用戶體驗。

github地址

這個插件的底層技術支撐是ServiceWorker和AppCache。用法就是把這個插件加到你的webpack 配置文件中而且把一段運行時代碼放到你的項目中，這樣你打包出來的項目代碼會被瀏覽器緩存來達到離線體驗的效果。

安裝

npm install offline-plugin [--save-dev]
複製代碼

配置

首先在webpack.config中加入這個插件：

// webpack.config.js example
var OfflinePlugin = require('offline-plugin');
module.exports = {
  // ...
  plugins: [
    // ... other plugins
    // it's always better if OfflinePlugin is the last plugin added
    new OfflinePlugin()
  ]
  // ...
}
複製代碼

而後將如下運行時代碼放到你的入口文件（通常是主入口文件）：

require('offline-plugin/runtime').install();
複製代碼

ES6/Babel/TypeScript

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

關於TypeScript的更多使用細節，請參考這裏。

webpack-pwa-manifest

webpack-pwa-manifest是這樣描述本身的：」Progressive Web App Manifest Generator for Webpack, with auto icon resizing and fingerprinting support.「

github地址

webpack-pwa-manifest能夠爲你的PWA應用生成manifest.json文件。

若是你有在configuration裏面使用注入的功能，必定要確認HtmlWebpackPlugin在plugins這個數組中放在WebpackPwaManifest這個插件前面。

功能

• AutoIcon resizing - AutoIcon大小調整
• Icon fingerprinting - 圖標指紋
• Manifest fingerprintling - 清單指紋
• AutoManifest injection on HTML - HTML自動清單注入
• Hot-reload support - 熱重載支持

安裝

npm install --save-dev webpack-pwa-manifest
複製代碼

用法

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', //can be null, use-credentials or anonymous
    icons: [
      {
        src: path.resolve('src/assets/icon.png'),
        sizes: [96, 128, 192, 256, 384, 512] // multiple sizes
      },
      {
        src: path.resolve('src/assets/large-icon.png'),
        size: '1024x1024' // you can also use the specifications pattern
      }
    ]
  })
]
複製代碼

imagemin-webpack-plugin

imagemin-webpack-plugin是一個使用imagemin進行圖片壓縮的插件。

github地址

安裝

npm install imagemin-webpack-plugin
複製代碼

使用

import ImageminPlugin from 'imagemin-webpack-plugin'
module.exports = {
  plugins: [
    // Make sure that the plugin is after any plugins that add images
    new ImageminPlugin({
      disable: process.env.NODE_ENV !== 'production', // Disable during development
      pngquant: {
        quality: '95-100'
      }
    })
  ]
}
複製代碼

prerender-spa-plugin

prerender-spa-plugin將單頁應用預渲染(prerender)爲靜態HTML文檔。

github地址

這個插件的目標是爲任何使用webpack進行構建的網站進行一個簡單易擴展的，可用的預渲染解決方案。

什麼是預渲染

最近服務端渲染（SSR）卷席了JavaScript的前端世界。在將你的代碼發送到客戶端瀏覽器以前在服務端進行渲染無疑是一個頗有革命性的主意。

然而，JavaScript的服務端渲染站點其實和PHP，ASP，JSP這些站點具備同樣的問題，就是它們都很慢，容易崩，並且很難實現。

雖然可能有人會告訴你不須要用到服務端渲染，你卻能夠經過預渲染（prerendering）來得到服務端渲染全部的好處而沒有它的壞處。預渲染本質上是在打包的時候啓動一個無頭瀏覽器，記錄路由而後將渲染的結構存儲到靜態的HTML文件中。你可使用你如今用到的任何靜態文件服務解決方案。它自己就支持HTML5導航之類的東西，你無需在你的業務代碼中添加和服務端渲染相關的內容。

安裝

yarn add -D prerender-spa-plugin
複製代碼

基礎用法

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
module.exports = {
  plugins: [
    ...
    new PrerenderSPAPlugin({
      // Required - The path to the webpack-outputted app to prerender.
      staticDir: path.join(__dirname, 'dist'),
      // Required - Routes to render.
      routes: [ '/', '/about', '/some/deep/nested/route' ],
    })
  ]
}
複製代碼

duplicate-package-checker-webpack-plugin

這個插件會在你引進重複依賴的時候給你警告。

github地址

爲何會有重複的包？

這種狀況是有可能的，由於你用到的依賴可能使用了不一樣版本相同的庫作爲dependency。若是這種狀況發生了，webpack通常是不會給你警告的，但是這些重複的依賴可能會引起一些很難被發現的bugs。

若是你的代碼裏面有重複的包，這個插件會給你警告進而避免打包的包體積過大或者產生bug。

緣由：github.com/webpack/web…和github.com/webpack/web…

安裝

npm install duplicate-package-checker-webpack-plugin --save-dev
複製代碼

使用

在webpack的配置文件裏面加入該插件

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

持續關注個人技術動態

我是進擊的大蔥，關注我和我一塊兒進步成獨當一面的全棧工程師！

關注個人我的公衆號獲取個人最新技術推送！