阅读 708

【译】你不得不知道的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地址

这个插件的底层技术支撑是ServiceWorkerAppCache。用法就是把这个插件加到你的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里面使用注入的功能,一定要确认HtmlWebpackPluginplugins这个数组中放在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()]
};
复制代码

持续关注我的技术动态

我是进击的大葱,关注我和我一起进步成独当一面的全栈工程师!

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