1. webpack開發傳統前後端不完全分離的website，可行么
先說結論：可以。
首先，我默認你要使用 webpack 的目的是實現模塊化管理 js 的依賴關系。那麼我們之前就是這么做的。
我們的技術路線是：
傳統網站（後端模板，每個頁面寫一個 js 文件）
webpack（仍然使用後端模板，js 由gulp+webpack自動打包，每個頁面生成一個 js 文件）
前後端分離（前端類似於單頁應用，前端模板，前端打包）
所以在前後端不完全分離的時候，可以使用我們 2 的這種方式。
當然，更建議直接前後端分離。
2. 不懂前後端分離這篇就夠
前後端分離前我們的開發協作模式一般是這樣的：
前端寫好靜態的HTML頁面賀扮交付給後端開發。靜態頁面可以本地開發，也無需考慮業務邏輯只需要實現View即可。
後端使用模板引擎去套模板，同時內嵌一些後端提供的模板變數和一些邏輯操作。
然後前後端集成對接，遇到問題，前台返工，後台返工。
然後在集成，直至集成成功。
這種模式的問題
在前端調試的時候要安裝完整的一套後端開發工具，要把後端程序完全啟動起來。遇到問題需要後端開發來幫忙調試。我們發現前後端嚴重耦合，還要要求後端人員會一些HTML，JS等前端語言。前端頁面里還嵌入了很多後端的代碼。一旦後端換了一種語言開發，簡直就要重做。
像這種增加了大量的溝通成本，調試成本等，而且前後端的開發進度相互影響，從而大大降低了開發效率。
前後端分離並不只是開發模式，而是web應用的一種架構模式。在開發階段，前後端工程師約定好數據交互介面，實現並行開發和測試；在運行階段前後端分離模式需要對web應用進行分離部署，前後端之前使用HTTP或者其他協議進行交互請求。
1. 客戶端和服務端採用RESTFul API的交互方式進行交互
2. 前後端代碼庫分離
在傳統架構模式中，前後端代碼存放於同一個代碼庫中，甚至是同一工程目錄下。頁面中還夾雜著後端代碼。前後端工程師進行開發時，都必須把整個項目導入到開發工具中。
前後端代碼庫分離，前端代碼中有可以消蘆進行Mock測試(通過構造虛擬測試對 象以簡化測試環境的方法)的偽後端，能支持前端的獨立開發和測試。而後端代碼中除了功能實現外，還有著詳細的測試用例，以保證API的可用性，降低集成風險。
3. 並行開發
在開發期間前後端共同商定好數據介面的交互形式和數據格式。然後實現前後端的並行開發，其中前端工程師在開發完成之後可以獨自進行mock測試，而後端也可以使用Postman等介面測試軟體進行介面自測，然後前後端一起進行功能聯調並校驗格式，最終進行自動化測試。
分離後，開發模式是這樣的
為優質產品打造精益團隊
通過將開發團隊前後端分離化，讓前後端工程師只需要專注於前端或後端的開發工作，是的前後端工程師實現自治，培養其獨特的技術特性，然後構建出一個全棧式的精益開發團隊。
提升開發效率
前後端分離以後，可以實現前後端代碼的解耦，只要前後端溝通約定好應用所需介面以及介面參數，便可以開始並行開發，無需等待對方的開發工作結束。與此同時，即使需求發生變更，只要介面與數據格式不變，後端開發人員就不需要修改代碼，只要前端進行變動即可。如此一來整個應用的開發效率必然會有質的提升。
完美應對復雜多變的前端需求
如果開發團隊能完成前後端分離的轉型，打造優秀的前後端團隊，開發獨立化，讓開發人員做到專注專精，開發能力必然會有所提升，能夠完美應對各種復雜多變的前端需求。
增強代碼可維護性
前後端分離後，應用的代碼不再是前後端混合，只有在運行期才會有調用依賴關系。應用代碼將會變得整潔清晰，不論是代碼閱讀還是代碼維護都會比以前輕松。
使用了前後端分離架構後，除了開發模式的變更，我們在開發的過程中還會遇到哪些問題呢？我們接著往下看。
我們先來看看傳統開發，我們是如何進行用戶認證的
前端登錄，後端根據用戶信息生成一個jsessionid，並保存這個 jsessionid 和對應的用戶id到Session中，接著把 jsessionid 傳給用戶，存入瀏覽器 cookie，之後瀏覽器請求帶上這個cookie，後端根據這個cookie值來查詢用戶，驗證是否過期。
HTTP有一個特性：無狀態的，就是前後兩個HTTP事務它們並不知道對方的信息。而為了維護會話信息或用戶信息，一般可用Cookie和Session技術緩存信息。
- Cookie是存儲在客戶端的
- Session是存儲在服務端的
但這樣做問題就很多，拿拍帶如果我們的頁面出現了 XSS 漏洞，由於 cookie 可以被 JavaScript 讀取，XSS 漏洞會導致用戶 token 泄露，而作為後端識別用戶的標識，cookie 的泄露意味著用戶信息不再安全。盡管我們通過轉義輸出內容，使用 CDN 等可以盡量避免 XSS 注入，但誰也不能保證在大型的項目中不會出現這個問題。
在設置 cookie 的時候，其實你還可以設置 httpOnly 以及 secure 項。設置 httpOnly 後 cookie 將不能被 JS 讀取，瀏覽器會自動的把它加在請求的 header 當中，設置 secure 的話，cookie 就只允許通過 HTTPS 傳輸。secure 選項可以過濾掉一些使用 HTTP 協議的 XSS 注入，但並不能完全阻止。
httpOnly 選項使得 JS 不能讀取到 cookie，那麼 XSS 注入的問題也基本不用擔心了。但設置 httpOnly 就帶來了另一個問題，就是很容易的被 XSRF，即跨站請求偽造。當你瀏覽器開著這個頁面的時候，另一個頁面可以很容易的跨站請求這個頁面的內容。因為 cookie 默認被發了出去。
解決方案
JWT（Json Web Token）
JWT 是一個開放標准(RFC 7519)，它定義了一種用於簡潔，自包含的用於通信雙方之間以 JSON 對象的形式安全傳遞信息的方法。該信息可以被驗證和信任，因為它是數字簽名的。JWTS可以使用秘密（使用HMAC演算法）或公鑰/私鑰對使用RSA或ECDSA來簽名。
- 簡潔(Compact)：可以通過URL, POST 參數或者在 HTTP header 發送，因為數據量小，傳輸速度快。
- 自包含(Self-contained)：負載中包含了所有用戶所需要的信息，避免了多次查詢資料庫。
JWT 組成
JWT由3個子字元串組成，分別為Header，Payload以及Signature，結合JWT的格式即：Header.Payload.Signature。（Claim是描述Json的信息的一個Json，將Claim轉碼之後生成Payload）。
Header
Header是由下面這個格式的Json通過Base64編碼（編碼不是加密，是可以通過反編碼的方式獲取到這個原來的Json，所以JWT中存放的一般是不敏感的信息）生成的字元串，Header中存放的內容是說明編碼對象是一個JWT以及使用「SHA-256」的演算法進行加密（加密用於生成Signature）
- 頭部包含了兩部分，token 類型和採用的加密演算法
- Base64是一種編碼，也就是說，它是可以被翻譯回原來的樣子來的。它並不是一種加密過程。
Payload
Payload是通過Claim進行Base64轉碼之後生成的一串字元串，Claim是一個Json，Claim中存放的內容是JWT自身的標准屬性，所有的標准屬性都是可選的，可以自行添加，比如：JWT的簽發者、JWT的接收者、JWT的持續時間等；同時Claim中也可以存放一些自定義的屬性，這個自定義的屬性就是在用戶認證中用於標明用戶身份的一個屬性，比如用戶存放在資料庫中的id，為了安全起見，一般不會將用戶名及密碼這類敏感的信息存放在Claim中。將Claim通過Base64轉碼之後生成的一串字元串稱作 Payload 。
Signature
Signature是由Header和Payload組合而成，將Header和Claim這兩個Json分別使用Base64方式進行編碼，生成字元串Header和Payload，然後將Header和Payload以Header.Payload的格式組合在一起形成一個字元串，然後使用上面定義好的加密演算法和一個密匙（這個密匙存放在伺服器上，用於進行驗證）對這個字元串進行加密，形成一個新的字元串，這個字元串就是 Signature 。
簽名的目的： 最後一步簽名的過程，實際上是對頭部以及負載內容進行簽名，防止內容被竄改。如果有人對頭部以及負載的內容解碼之後進行修改，再進行編碼，最後加上之前的簽名組合形成新的JWT的話，那麼伺服器端會判斷出新的頭部和負載形成的簽名和JWT附帶上的簽名是不一樣的。如果要對新的頭部和負載進行簽名，在不知道伺服器加密時用的密鑰的話，得出來的簽名也是不一樣的。
三個部分通過.連接在一起就是我們的 JWT 了：
JWT認證
伺服器在生成一個JWT之後會將這個token發送到客戶端機器，在客戶端再次訪問受到JWT保護的資源URL鏈接的時候，伺服器會獲取到這個token信息，首先將Header進行反編碼獲取到加密的演算法，在通過存放在伺服器上的密匙對Header.Payload 這個字元串進行加密，比對token中的Signature和實際加密出來的結果是否一致，如果一致那麼說明該token是合法有效的，認證成功，否則認證失敗。
JWT使用總結
1. 首先，前端通過Web表單將自己的用戶名和密碼發送到後端的介面。這一過程一般是一個HTTP POST請求。建議的方式是通過SSL加密的傳輸（https協議），從而避免敏感信息被嗅探。
2. 後端核對用戶名和密碼成功後，將用戶的id等其他信息作為JWT Payload（負載），將其與頭部分別進行Base64編碼拼接後簽名，形成一個JWT。形成的JWT就是一個形同lll.zzz.xxx的字元串。
3. 後端將JWT字元串作為登錄成功的返回結果返回給前端。前端可以將返回的結果保存在Cookie或localStorage或sessionStorage上，退出登錄時前端刪除保存的JWT即可。
4. 前端在每次請求時將JWT放入HTTP Header中的Authorization位。(解決XSS和XSRF問題)
5. 後端檢查是否存在，如存在驗證JWT的有效性。例如，檢查簽名是否正確；檢查Token是否過期；檢查Token的接收方是否是自己（可選）。
6. 驗證通過後後端使用JWT中包含的用戶信息進行其他邏輯操作，返回相應結果。
JWT和Session方式存儲id的差異
Session方式存儲用戶id的最大弊病在於Session是存儲在伺服器端的，所以需要佔用大量伺服器內存，對於較大型應用而言可能還要保存許多的狀態。一般而言，大型應用還需要藉助一些KV資料庫和一系列緩存機制來實現Session的存儲。
而JWT方式將用戶狀態分散到了客戶端中，可以明顯減輕服務端的內存壓力。除了用戶id之外，還可以存儲其他的和用戶相關的信息，例如該用戶是否是管理員、用戶所在的分組等。雖說JWT方式讓伺服器有一些計算壓力（例如加密、編碼和解碼），但是這些壓力相比磁碟存儲而言可能就不算什麼了。
單點登錄
Session方式來存儲用戶id，一開始用戶的Session只會存儲在一台伺服器上。對於有多個子域名的站點，每個子域名至少會對應一台不同的伺服器，例如：
www.taobao.com，nv.taobao.com，nz.taobao.com，login.taobao.com。所以如果要實現在login.taobao.com登錄後，在其他的子域名下依然可以取到Session，這要求我們在多台伺服器上同步Session。使用JWT的方式則沒有這個問題的存在，因為用戶的狀態已經被傳送到了客戶端。
當客戶端和服務端分開部署到不同伺服器的時候，就會遇到跨域訪問的問題，是由瀏覽器同源策略限制的一類請求場景。
跨域解決方案有很多種，下面使用Nginx反向代理的方案
反向代理
代理訪問其實在實際應用中有很多場景，在跨域中應用的原理做法為：通過反向代理伺服器監聽同埠，同域名的訪問，不同路徑映射到不同的地址，比如，在nginx伺服器中，監聽同一個域名和埠，不同路徑轉發到客戶端和伺服器，把不同埠和域名的限制通過反向代理，來解決跨域的問題：
3. 前端的全棧模式是什麼架構，node.js做中間端，JAVA或者其他語言做後端，該怎麼理解
前端的全棧模式其數拆實就是我們現在說的「大前端」概念。
老一輩的程序員應該都有印象，以前我們說的前端更多就是靜態頁面的布局和頁面交互的實現，用到的技術主要就是：DIV+CSS、JavaScript、Ajax。
那時候的「前後端分離」也不是完全的分薯伍棗離！前端做好頁面後是要交給後端開發人員進行整合的，更多的是種「模板」思想，前端做的只是「模板」，而模板里的數據填充還是要靠後端來處理。
而當下的「前後端分離」較之前要徹底一些！現在的前端不是傳統的前端了，也涉及以前後端的一些技術，比如我們也可以把PHP劃分到前端領域，用PHP來實現數據的渲染。
對於大型網站架構橘升，現在一般是這樣的：
PHP/NodeJS渲染頁面>Vue調用數據>JavaAPI>資料庫
這種架構模式的優點主要有以下：
實現了前後端的完全分離，前端各類終端（Web、H5、APP、TV等）的頁面風格展示方式不同，但不影響後端API的統一化；
術有專攻，便於控制；
並行開發，提升了開發效率。
4. 微服務架構下，進行前後端分離，前端怎麼寫
分離後的前端，不再是一個簡單的HTML文件，已經是一個獨立的應用系統。除了要考慮頁面的數據渲染展示，還要用工程化的思想來考慮前端的架構，前後端的交互和數據安全等事情。
RESTful介面交互
前後端分離之後，更多的是採用RESTful風格的介面與後端進行數據交互。
REST是「呈現狀態轉移（REpresentational State Transfer）」的縮寫，一種API的架構風格，在客戶端和服務端之間通過呈現狀態的轉移來驅動應用狀態的演進。
在 REST 樣式的 Web 服務中，每個資源都有一個地址。資源本身都是方法調用的目標，方法列表對所有資源都是一樣的。這些方法都是標准方法，包括 HTTP GET、POST、PUT、DELETE，還可能包括 HEADER 和 OPTIONS。
RESTful的API設計，使得後端通過介面向前端傳遞數據，數據的格式通常是JSON這種通用的格式。對前端來說，只要後端返回過來的是RESTful的數據就行，不管後端是用Java寫，還是用python或PHP，拜託對後端的依賴，做到前端系統的獨立。
工程化構建
Nodejs不止可以用來做前端伺服器，在開發階段，它也能發揮很大的作用。
前端生態的發展，是圍繞著Nodejs進行的。用npm來管理項目依賴，可以很好的維護和運行在Nodejs環境上。
打包工具grunt、gulp、webpack和rollup等，都是運行在nodejs上，再結合語法編譯、打包部署等插件，將應用輸入成一個完整的應用。
如果你使用了Angular、React或Vue框架，或者你使用瀏覽器暫時還不兼容的ES6語法，還需要在應用打包前用babel將語法編譯成瀏覽器可識別的ES5的語法。
SPA
SPA是單頁Web應用（single page web application，SPA）的簡寫，就是只有一張Web頁面的應用，是載入單個HTML 頁面並在用戶與應用程序交互時動態更新該頁面的Web應用程序。
像Angular、React或Vue就是為了SPA而設計的，結合前端路由庫（react-router、vue-router）和狀態熱存儲（rex、vuex）等，可以開發出一個媲美Native APP的Web APP，用戶體驗得到了很大的提升。
當然，SPA也不是完美的，也不是適合所有的web應用，需要結合項目和場景來選擇。
SPA有如下缺點：
初次載入耗時增加。可以通過代碼拆分、懶載入來提升性能，減少初次載入耗時。
SEO不友好，現在可以通過Prerender或Server render來解決一部分。
頁面的前進和後端需要開發者自己寫，不過現在一些路由庫已經幫助我們基本解決了。
對開發者要求高，由於做SPA需要了解一整套技術棧，所以，要考慮後期是否有合適的人選進行維護。
5. 如何正確理解軟體系統架構的前後端分離
首先：軟體系統架構的前後端分離更多是在近幾年伴隨互聯網的盛行為提高前端與後端交互的響應速率，提升用戶的體驗進行衍生出了前後端分離架構。如：Vue、NodeJS與微服務架構結合。前端頁面進行UI展示效果渲染，後端負責編寫API服務進行數據提供，也可以引入NodeJS來作為橋梁架接後端API輸出的JSON，返回前端進行頁面展現。
其次：基於前後端分離架構一方面提升響應速稿橘度，將數據計算的過程在中間層處理，前端進行展示；避免傳統的大量數據請求伺服器的壓力基於中間層在內部處理拼接完成，性能得到了提升；以多組件、片段、卡片的模式實現並行的加攔敬梁載、顯示，在非WiFI的3G、2G的弱網路環境下優勢更為明顯，模板並行載入，優先載入優先顯示，提升用戶的交互體驗。
最後：從經典簡運的MVC架構到SSM、SSH的Java框架時代，再到前端框架如：AngularJS、Vue等，雖然技術、架構一直在演變進步本質上均是為了更方便的解決需求，前後端分離架構更多的也是實現解耦的過程，不將前端與後端綁定，這也與SOA的理念是相吻合的，基於企業服務匯流排實現應用系統對接的松耦合，以插拔的模式將應用、單據、數據進行有效的連通與對接，以組件構建、平台搭建、架構支撐的模式共同鑄建企業的信息化建設，以更專業的平台實現其專業領域的工作，助力企業信息化的發展。