经过这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()]
};
复制代码

---

文章首发于公众号 《前端外文精选》，私信回复：大礼包，送某网精品视频课程网盘资料，准能为你节省很多钱！