單頁面SPA，多頁面MPA。實戰開發中，不管vue還是react都是單頁面應用。(面試會問到多頁面配置，要記下流程)。多頁面代表多入口

1、(在webpack.config.js中配置)  多入口

entry:{
    index:"./src/index.js",
    admin:"./src/admin.js"
}

2、(在webpack.config.js中配置)  輸出配置

output:{
    filename:"[name].js",//如果是多頁面應用不能寫死，需要用到[name]自動獲取入口的home和admin
    path:path.resolve("dist"),//路徑必須是一個絕對路徑
    publicPath:"/"
 
 //build之後的公共路徑(這個屬性很重要)
}

3、(在webpack.config.js中配置)  配置html模板外掛

plugins:[
        new HtmlWebpackPlugin(  
            {
                template:'./public/index.html',
                filename:'index.html',
                chunks:['index'],//只引用index.js，解決index.html裡面載入index.js和admin.js的問題
                minify:{
                    //removeAttributeQuotes:true,//true去除html雙引號
                    collapseWhitespace:true 
                },
                hash:true
            }
        ),
        new HtmlWebpackPlugin(  
            {
                template:'./public/admin.html',
                filename:'admin.html',
                chunks:['admin'],
                minify:{
                    collapseWhitespace:true 
                },
                hash:true
            }
        )
 

    ]

【程式碼演示】

如何執行打包後的專案？

npm install -g serve 專門用來執行build之後的檔案

實際開發時候，專案不會直接上傳到主域名資料夾目錄下的。比如主域名資料夾目錄是vueshop.glbuys.com/，現在讓你把專案上傳到vueshop.glbuys.com/demo/下進行訪問。

（npm run dev是在開發者環境下執行訪問。npm run build是對專案進行webpack打包。正式上線是釋出到ngxi或者apache上面，現在模擬正式的專案釋出上線。）