之前的開(kāi)發(fā)選擇的是完全舍棄服務(wù)端，僅保留最簡(jiǎn)單web服務(wù)器提供angular經(jīng)打包的靜態(tài)資源，此外所有的業(yè)務(wù)與數(shù)據(jù)請(qǐng)求都訪問(wèn)一個(gè)分離的WebApi來(lái)實(shí)現(xiàn)。不過(guò)最近碰到一個(gè)需求，有必要使用多個(gè)客戶端，而各客戶端本身都是webpack打包出來(lái)的js而已，沒(méi)必要每個(gè)客戶端都自己建一個(gè)站點(diǎn)，這就有必要搭建一個(gè)服務(wù)端，根據(jù)參數(shù)動(dòng)態(tài)渲染不同客戶端的腳本來(lái)服務(wù)多個(gè)客戶端了。主要需要解決兩個(gè)問(wèn)題，一是防止前后端路由沖突各自有效工作，二是如何實(shí)現(xiàn)一套比較合理的部署方案。籠統(tǒng)一點(diǎn)看待這個(gè)問(wèn)題，無(wú)非就是要實(shí)現(xiàn)如題目所描述的，如何將專注前端的強(qiáng)大框架(angular)整合到一個(gè)健壯的現(xiàn)有服務(wù)端(.Net)項(xiàng)目中去。
Webpack配置
第一步必然是要先得到前端項(xiàng)目的打包資源，由強(qiáng)大的webpack來(lái)完成，目標(biāo)是將angular的所有依賴以及應(yīng)用主代碼分別打包到polyfill.js、vendor.js、main.js三個(gè)腳本中，以及異步懶加載的模塊各自打包成一個(gè)chunk.js。webpack博大精深，剛接觸會(huì)摸不著頭腦，好在其終究是用來(lái)給我們帶來(lái)方便的一個(gè)工具而已，使用起來(lái)是很有條理的。其主要的介紹可以移步webpack的官方文檔【https://doc.webpack-china.org 】，認(rèn)真吸收完遠(yuǎn)遠(yuǎn)足夠?qū)懗鯽ngular-webpack-starter【 https://github.com/AngularClass/angular-starter 】這樣完善的啟動(dòng)項(xiàng)目來(lái)了。
簡(jiǎn)單來(lái)說(shuō)webpack配置有四部曲：
一、 定義入口文件 包含angular的依賴，angular框架代碼以及項(xiàng)目的啟動(dòng)代碼即可，比如angular-webpack-starter中的配置：
entry: { 'polyfills': './src/polyfills.browser.ts', // 依賴項(xiàng)
'main': AOT ? './src/main.browser.aot.ts' : './src/main.browser.ts' // 主程序
},二、 定義打包規(guī)則
打包規(guī)則有好一些需要配置的，包括了各種文件類型的打包，angular模塊的打包等，配置方式見(jiàn)官方文檔或直接參照現(xiàn)成的啟動(dòng)項(xiàng)目，直接看難免懵逼，但不要怕，規(guī)則其實(shí)就那么點(diǎn)，眼熟就成功了大半。
三、配置插件
webpack有非常多的插件，用來(lái)強(qiáng)化打包能力以及規(guī)則的擴(kuò)展，可以看看啟動(dòng)項(xiàng)目中用到了哪些，這些插件在官方文檔里都能找到介紹。
四、 定義輸出規(guī)則
