Vue 项目优化——为开发、发布模式指定不同的打包入口

默认情况下，vue项目的开发模式和发布模式，共用同一个打包的入口文件(即src/main.js)，但是开发阶段和上线阶段代码往往会有细微的差别。

一、为了将项目的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件：

1. 发开模式

入口文件为：src/main-dev.js

2. 发布模式

入口文件为：src/main-prod.js

默认情况下，vue-cli3.0生成的项目，隐藏了webpack配置项，如果我们要配置webpack,需要在项目根目录中创建vue.config.js文件来配置。

二、在vue.config.js导出的配置文件中，新增congfigureWebpack或chainWebpack节点，来自定义webpack的打包配置

congfigureWebpack 和 chainWebpack 的作用相同，唯一的区别就是修改webpack的配置方式不同：

1. chainWebpack

通过链式编程的形式，来修改默认的webpack配置

2. congfigureWebpack

通过操作对象的形式，来修改默认的webpack配置

两者具体的使用差异，可参考如下网址:
congfigureWebpack和chainWebpack的使用

三、具体步骤

1. 在项目根目录下创建vue.config.js文件

2. 将mian.js拷贝一份，分别重命名为main-dev.js和main-prod.js

3. 通过示例代码配置入口：

module.exports = {
    chainWebpack:config=>{
        //发布模式
        config.when(process.env.NODE_ENV === 'production',config=>{
            //entry找到默认的打包入口，调用clear则是删除默认的打包入口
            //add添加新的打包入口
            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')
        })
    }
}