資訊專欄INFORMATION COLUMN
摘要：也就是說，我們需要做一個非單頁應用的工程化項目。現在這個項目的靜態資源是以文件哈希值來控制的。這個該怎么解決呢感謝，我們可以通過如下的配置來實現意思就是如果圖片是在中引用的則不加哈希值，在文件中引入的則加上。
最近金拱門比較火，我們先戳開它的官網看看。
看完后，如果你老板要是讓你做這么一個網站，一定要seo，一定要兼容IE，你會怎么去做呢？
用vue/react吧，單頁應用滿足不了seo，而且IE兼容性不好。上node中間層做服務端渲染又把事情搞麻煩了。只能用JQuery干，但是又該怎么做工程化呢？好像也不是很容易。因為目前大家的工程化方案多是一整套單頁應用全家桶，如vue-cli的webpack模板。
而前端到如今這個階段，再讓大家接手一個沒有工程化的項目，肯定內心非常抵觸了。試想這么一個項目，手動link資源，不能寫less/sass，不能寫ES6，不能依賴管理，不能編譯打包...，哦天，想都不敢想。可是工程化這事在實際業務中卻沒有大家想象中的那么順利。比如剛剛金拱門的官網，頁面很多，要求滿足SEO，IE兼容。而且遇到這些項目，往往還會有這些問題：
由于頁面是后端渲染，需要部署后端程序（php,java之類），各種環境配置相當麻煩。
前端的html代碼依托于服務端，導致前端做工程化時，很難對接前后端項目。
也就是說，我們需要做一個非單頁應用的工程化項目。這個項目在線上時是前后端耦合的，但是在開發時，我們又不想前后端耦合。再整理一下，我們需要解決的問題有：
前后端分離，前端開發不能依賴于后端環境。
前端工程化。諸如靜態資源的打包編譯、依賴的管理、組件化等等。
明確了要解決的問題后，我們就可以開始了。我們可以用webpack搭建一個項目，幫我們做一些打包、編譯、文件處理這些工程化工作。webpack從零配置比較繁瑣，我們可以選擇修改一個輪子，比如把vue-cli的webpack模板改造一下，刪了沒必要的vue-loader，給它增加一下多頁面入口就好了。
修改輪子 第一步：理解 vuejs-templates/webpacknpm 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多入口配置教程。然而他們不一定就能滿足我們的需求。他們普遍存在如下問題：
入口文件需要自己配置。在一個頁面較多的項目中，入口文件應當從約定的目錄中自動讀取，也更符合約定優于配置。
多入口是針對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 @相學長。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89360.html
摘要：作者眾成翻譯只寫的禪眾成翻譯如何使更高效如何用構建前端架構小米直達服務介紹與開發實戰搭建一個多頁面的無依賴的工程化項目掘金計算機網絡概念和結構掘金英文 2017-10-29 前端日報 精選 【譯】圖與例解讀Async/AwaitVue + TypeScript 新項目起手式 React-Router動態路由設計最佳實踐Vue2 原理淺談使用合適的設計模式一步步優化前端代碼The 14 ...
摘要：總結我覺得，以后基于的全棧式開發的模式將會越來越流行，這也會引領前端步入工程化時代。歡迎繼續關注本博的更新中間層實踐一基于的全棧式開發中間層實踐二搭建項目框架中間層實踐三配置中間層實踐四模板引擎中間層實踐五中間層的邏輯處理 版權聲明：更多文章請訪問我的個人站Keyon Y，轉載請注明出處。 前言 近期公司有個新項目，由于后端人手不足，我果斷的提議用node中間層的方案，得到了老大的支持...
摘要：概述我非常認同前百度數據工程師現神策分析創始人桑老師最近談到的數據分析三重境界統計計數多維分析機器學習數據分析的統計計數和多維分析，我們通常稱之為數據探索式分析，這個步驟旨在了解數據的特性，有助于我們進一步挖掘數據的價值。 showImg(https://camo.githubusercontent.com/f98421e503a81176b003ddd310d97e1e1214625...
摘要：畢竟實現一個業務需求，是一種技術，而通過寫作，分享，討論等，能得到的就是一種技能了。我決定采用目前市場上的三大框架之一來進行項目演示，剛剛結束分享，這里把我分享的過程給大家分享一下。所以如題，請選擇原諒我啊。 why？ 身為技術人員有沒有必要在自己學習與開發的過程中做技術分享（很尷尬，技術明明才差不多一年），這幾乎是一件很明顯的事情了，寫文章，開博客，搞分享會，幾乎任何一種線上線下交流...
摘要：繼承作用就是避免配置重復，對于子項目來說應該關心父項目是怎么樣配置的。聚合字面理解就是聚在一起合作完成工作，就是將子模塊聚集起來完成相應的項目需求父工程的搭建項目結構在父工程中，主要負責完成依賴的版本管理，并不是實際的依賴。 從大二開始就一直關注segmentFault,在問題專區幫忙回答一些自己知曉的問題；在寫這篇文章之前我一直會在朋友圈發一些自己遇到的問題以及解決辦法，這是第一次寫...
閱讀 1496·2021-10-11 10:59
閱讀 1857·2021-09-09 11:36
閱讀 1369·2019-08-30 15:55
閱讀 1322·2019-08-29 11:20
閱讀 3057·2019-08-26 13:39
閱讀 1458·2019-08-26 13:37
閱讀 1951·2019-08-26 12:11
閱讀 1313·2019-08-23 14:28
