Webpack优化

Webpack的优化在之前的对Webpack的操作已经有很多，例如：分离开发和生产环境、分离和压缩CSS代码，增加 devtool 优化开发和生产环境的调试等等

接下来再介绍一些优化方案：

1. 规定文件处理区域
2. 查看文件大小，过大的着手处理

规定文件处理区域

项目中js文件是很多的，尤其是在node_modules文件夹中，但是我们需要处理的就有src目录下的

所以我们需要指定区域

xxxxxxxxxx
 {
     test: /\.js$/,
     use: ['babel-loader'],
     // 包含只处理 src 目录下的文件
     include: path.resolve(__dirname, 'src'),
 }

查看文件大小，过大的着手处理

webpack-bundle-analyzer 是一个打包分析神器，它的界面也清晰，而且能很直观的给出每一个打包出来的文件的大小以及各自的依赖，能够更加方便的帮助我们对项目进行分析

安装：npm install --save-dev webpack-bundle-analyzer

增加配置：

xxxxxxxxxx
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerPort: 8888, // 指定端口号
      openAnalyzer: false,
    })
  ]
}