vue项目上线优化之生成打包报告以及修改webpack开发和发布环境的入口文件

一、生成 vue 项目的打包报告

1. 在打包时，为了直观的发现项目中存在的问题，可以在打包时生成报告，生成报告有两种方式：

• 通过命令行参数的形式生成报告
• 通过可视化的 UI 面板直接查看报告，通过控制台和分析面板，直接看到项目中存在的问题

2. 在这里，以命令行参数的形式生成报告，通过 npm run build --report的命令就可以生成报告，如图所示：
   

3. 在加上 --report命令后，可以生成 report.html来帮助分析包的内容，通过 http://127.0.0.1:8888/ 就可以查看打包报告里面的内容了 ，如图所示：
   

二、通过 vue.config.js 文件修改webpack的默认配置

1. 修改 webpack 默认配置的需求，可以在项目根目录中，按需创建 vue.config.js 这个配置文件，从 而对项目的打包发布过程做自定义的配置，代码如下：

module.exports = {
    ... // 具体配置选项
}

2. 在vue项目的开发模式和发布模式中，共用同一个打包的入口文件，也就是 src/main.js，为了将项目 的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件，即：

• 开发模式的入口文件为 src/main-dev.js
• 发布模式的入口文件为src/main-prod.js

3. 在 vue.config.js导出的配置对象中，新增 configureWebpack或 chainWebpack 节点，来自定义webpack 的打包配置。configureWebpack 和 chainWebpack 的作用相同，唯一的区别就是它们修改 webpack 配置的方式不同：

• chainWebpack 通过 链式编程的形式，来修改默认的 webpack 配置
• configureWebpack 通过 操作对象的形式，来修改默认的 webpack 配置

4. 在vue项目的src根目录下，建立 main-dev.js 和 main-prod.js 文件，也就是之前的 main.js 的配置文件.
5. 在vue.config.js 文件中，通过 chainWebpack修改配置，通过 process.env.NODE_ENV 判断是production环境还是development环境，从而添加不同的入口文件，代码如下：

module.exports = {
    // 通过 chainWebpack 修改 webpack的默认配置
    chainWebpack: config => {
        // 修改生产环境的入口文件
        config.when(process.env.NODE_ENV === 'production', config => {
            config.entry('app').clear().add('./src/main-prod.js')
        })
        
        // 修改开发环境的入口文件
        config.when(process.env_NODE_ENV === 'development', config => {
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}