记录几个平时自己使用的webpack插件

// 注意，在vue.config.js中请放在configureWebpack对象中
module.exports = {
    configureWebpack: {
      plugins: [
          // ...
      ]
    }
}

1. webpack-bundle-analyzer 可视化分析包插件

• 安装

npm install --save-dev webpack-bundle-analyzer

• 使用

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
// ...
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
        analyzerMode: 'static',  // 默认为server
        openAnalyzer: true // 开发运行时可设置为false关闭分析功能
      })
  ]
}

2. progress-bar-webpack-plugin 打包进度条插件

• 安装

npm i -D progress-bar-webpack-plugin

• 使用

// webpack.config.js
const chalk = require('chalk')
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
// ...
module.exports = {
  plugins: [
    new ProgressBarPlugin({
        format: '  build [:bar] ' + chalk.green.bold(':percent') + ' (:elapsed seconds)',
        clear: false
      })
  ]
}

3. webpack-build-notifier 打包完成提示插件

• 安装

npm i webpack-build-notifier -D

• 使用

// webpack.config.js
const WebpackBuildNotifierPlugin = require('webpack-build-notifier')
// ...
module.exports = {
  plugins: [
    new WebpackBuildNotifierPlugin({
        title: name,
        logo: path.resolve('./public/favicon.ico'),
        suppressSuccess: true, // don't spam success notifications
      })
  ]
}

4. speed-measure-webpack-plugin 打包时间统计插件

• 安装

npm install --save-dev speed-measure-webpack-plugin

• 使用

// webpack.config.js
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin")
const smp = new SpeedMeasurePlugin()
const webpackConfig = {
    plugins: []
}
module.exports = smp.wrap(webpackConfig)