搭建一個多頁面的無依賴的工程化項目

最近金拱門比較火，咱們先戳開它的官網看看。

看完後，若是你老闆要是讓你作這麼一個網站，必定要seo，必定要兼容IE，你會怎麼去作呢？

用vue/react吧，單頁應用知足不了seo，並且IE兼容性很差。上node中間層作服務端渲染又把事情搞麻煩了。只能用JQuery幹，可是又該怎麼作工程化呢？好像也不是很容易。由於目前你們的工程化方案可能是一整套單頁應用全家桶，如vue-cli的webpack模板。

而前端到現在這個階段，再讓你們接手一個沒有工程化的項目，確定心裏很是抵觸了。試想這麼一個項目，手動link資源，不能寫less/sass，不能寫ES6，不能依賴管理，不能編譯打包...，哦天，想都不敢想。但是工程化這事在實際業務中卻沒有你們想象中的那麼順利。好比剛剛金拱門的官網，頁面不少，要求知足SEO，IE兼容。並且遇到這些項目，每每還會有這些問題：

1. 因爲頁面是後端渲染，須要部署後端程序（php,java之類），各類環境配置至關麻煩。
2. 前端的html代碼依託於服務端，致使前端作工程化時，很難對接先後端項目。

也就是說，咱們須要作一個非單頁應用的工程化項目。這個項目在線上時是先後端耦合的，可是在開發時，咱們又不想先後端耦合。再整理一下，咱們須要解決的問題有：

1. 先後端分離，前端開發不能依賴於後端環境。
2. 前端工程化。諸如靜態資源的打包編譯、依賴的管理、組件化等等。

明確了要解決的問題後，咱們就能夠開始了。咱們能夠用webpack搭建一個項目，幫咱們作一些打包、編譯、文件處理這些工程化工做。webpack從零配置比較繁瑣，咱們能夠選擇修改一個輪子，好比把vue-cli的webpack模板改造一下，刪了不必的vue-loader，給它增長一下多頁面入口就行了。

修改輪子

第一步：理解 vuejs-templates/webpack

npm install -g vue-cli

vue init webpack my-project複製代碼

既然要改人家的模板，先得理解人家都作了什麼。這裏就不帶你們讀代碼了，根據package.json的命令一個個文件的代碼看過去就知道了，很直接很暴力。

第二步：刪

既然咱們不須要用vue，那麼對於vue文件處理的相關邏輯咱們就不須要了。根據剛剛對這個模板的瞭解，咱們知道vue-loader跟vue-style-loader是不須要的。因此刪除對應的代碼跟package.json裏面的包就行了。

多提一點的是，vue-style-loader雖然不須要，style-loader仍是須要的，因此須要用後者替換前者。

第三步：加

作減法容易，作加法就沒這麼輕鬆了。根據咱們剛剛的需求，咱們應該給它加個多頁面入口。網上有很是多的webpack多入口配置教程。然而他們不必定就能知足咱們的需求。他們廣泛存在以下問題：

1. 入口文件須要本身配置。在一個頁面較多的項目中，入口文件應當從約定的目錄中自動讀取，也更符合約定優於配置。
2. 多入口是針對js的。因爲業界廣泛是在用單頁應用，頁面由js生成，故多頁面只要多個js入口就好，不須要直接寫html。而個人需求不是，我但願的多入口是針對html文件而言的。

不過當咱們解決了上述兩個問題後，咱們還會有一個新的問題。咱們不一樣的html文件，其實又是有公共的部分的。好比都有 header，footer。也就是說，咱們須要給這些html文件增長一個模板。咱們能夠經過webpack的loader來實現，可是沒有現成的loader能夠比較好的解決。那怎麼辦呢？能夠參考我另一篇文章。編寫本身的Webpack Loader。

靜態資源的版本控制

上述問題解決後，咱們的工做並未完成。如今這個項目的靜態資源是以文件哈希值來控制的。惋惜有的項目的靜態資源是要後端來更新時間戳控制的。雖然這不是個好方案，但有些工程卻依舊是這樣。沒辦法，爲了適應他們，咱們必須得去掉哈希值。但是這樣的話，當咱們想更新css內引用的圖片時又沒轍了，由於css內鏈的圖片後端無法控制版本。

這個該怎麼解決呢？感謝webpack，咱們能夠經過以下的配置來實現：

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  oneOf: [
    {
      issuer: /\.html$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[ext]',)
      }
    },
    {
      issuer: /\.(css|less)$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    }
  ]
}複製代碼

意思就是若是圖片是在html中引用的則不加哈希值，在css文件中引入的則加上。

完工

這樣咱們就完成了一個簡單的項目架構。它能幫助咱們實現文件的打包、編譯，html的模板控制等功能。最終能build出一份html+靜態資源的web頁面直接發佈cdn。固然也能夠把它們直接扔給後端。

不過這個架子還不是很是的完善，應用場景也有限，比較適用於一些交互較少、頁面較多、看重seo或者傳統後端套頁面的網站。另外，做爲工程化中很是重要的組件化與測試，因爲沒有任何框架的引入，這點也須要使用者本身再去摸索。

另外，若是仍是想用vue，react或angular，又不想搞他們的服務端渲染，能夠嘗試下變相的服務端渲染系統。

最後，若是這個架子對您有用，歡迎戳開github。

--閱讀原文 --轉載請先通過本人受權-丁香園F2E @相學長。