vueを通ります.config.js webpackのデフォルト構成の変更(Vueプロジェクトオンライン最適化3)

1、vueを通過する.config.js webpackのデフォルト構成の変更
vue-cli 3.0ツールで生成されたプロジェクトは、デフォルトではすべてのwebpackの構成項目が隠されています.プロジェクトの構成過程を遮断し、プログラマーに仕事の重心を具体的な機能とビジネスロジックの実現に置くことを目的としています.プログラマがwebpackのデフォルト構成を変更する必要がある場合は、プロジェクトルートディレクトリでvueを必要に応じて作成できます.config.jsというプロファイルは、プロジェクトのパッケージパブリケーションプロセスをカスタマイズするための構成です(具体的な構成参照).https://cli.vuejs.org/zh/config/#vue-config-js). 

// vue.config.js     
//      ，                      
module.exports = {     
//   ...   
} 

2、開発モードと配布モードに異なるパッケージ入口を指定する
デフォルトでは、Vueプロジェクトの開発モードはパブリッシュモードと同じパッケージのエントリファイル(すなわちsrc/main.js)を共有します.プロジェクトの開発プロセスとパブリケーションプロセスを分離するには、パッケージ化されたエントリファイル、すなわち、次の2つのモードを指定します.
①開発モードのエントリファイルはsrc/main-dev.js
②パブリッシュモードのエントリファイルはsrc/main-prod.js
3、configureWebpackとchainWebpack
vueでconfig.jsがエクスポートした構成オブジェクトにconfigureWebpackノードまたはchainWebpackノードが追加され、webpackのパッケージ構成を定義します.ここでconfigureWebpackとchainWebpackの役割は同じで、唯一の違いはwebpackの構成を変更する方法が異なることです.
①chainWebpackチェーンプログラミング形式でデフォルトのwebpack構成を変更する
②configureWebpackは、オブジェクトを操作することで、デフォルトのwebpack構成の両者の具体的な使用の違いを修正します.以下のURLを参照してください.https://cli.vuejs.org/zh/guide/webpack.html#webpack-%E7%9B%B8%E5%85%B3  
4、chainWebpackカスタムパッケージ入口
コードの例は次のとおりです.
注:アイテムを./srcディレクトリの下のエントリファイルのmain.jsファイルはmain-prod.js(パブリッシュモードのエントリファイル)とmain-dev.js(開発モードのエントリファイル)の2部をコピーします.

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