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')
        })
    }
}