【译】你不得不知道的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()]
};
复制代码

持续关注个人技术动态

我是进击的大葱，关注我和我一块儿进步成独当一面的全栈工程师！

关注个人我的公众号获取个人最新技术推送！