07_webpack 打包体积分析

01 webpack基本概念
02_webpack 基本命令
03_webpack loader的作用
04_webpack插件的用法
05_webpack devserver模式
06_weboack vue开发环境配置

webpack打包分析

安装 webpack-bundle-analyzer

yarn add webpack-bundle-analyzer -D

webpack配置

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

Vue中如何使用

需要在vue.config.js中进行配置

module.exports = {
  chainWebpack: config => {
    config
      .plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
  }
}