吐槽
在這個年頭 最苦逼的職業莫過於前端了 特別是2016年。 我本以為學了點gulp 打打包 已經算是合格的前端了 。但前端的發展速度實在太快…以webpack為首的新型構建正是前端新世界的大門。 你可以在三大金剛 ng react vue都能見到webpack打包 這一詞。 就連jquery老大哥也開始提倡webpack模塊化。 看來我們舊時代的人已經無法生存了。然而海賊白胡子依舊是最強。 不管哪個時代靠的還是自己
在開始正文前 要解釋下 前端這個大環境和webpack
舊時代前端 以傳統的靜態頁面 (html js css )編寫 + css3特效 transfrom位移 旋轉等等 + jquery zepto swiper 等常用js插件 也能手寫一些簡單特效等等 。處理pc手機游覽器兼容。grunt gulp 打打包之類
新時代前端 以nodejs和npm為核心 需要什么就install 什么 然后require 什么 。熟悉gulp webpack less sass 常用構建工具。他們是一種寫app方式寫html. 連入口文件都基本叫app.js
舊時代的前端呢 不存在編譯這個概念 游覽器里只要寫什么是什么 需要啥庫就一個src引入 那時候真是 天真 自由 代碼也是五花八門 。入門門檻也非常低 只要你會word ppt 。裝個chrome 和記事本 自學也能寫出很漂亮的頁面 很多惡搞圖都是這么搞出來的。而真是這些行為導致后台大佬不爽 他們開始以后台的角度寫前端 並且領導出了新時代的前端 。
在一開始的js中沒有編譯這個概念 寫什么就是什么 畢竟游覽器就是客戶端 這樣有好處（簡單自由）也有壞處（雜不規范）。而大佬們基本后台出生 一方面喜歡規范好維護 一方面不喜歡給人看源碼 在nodejs沒火起來前就嘗試用類似amd cmd加載器編寫, 火后就開始以webpack萬物皆模塊（js)去編寫。 這樣做似乎更讓前端符合程序員的形象。但也提高了學習成本 畢竟你寫的不是網頁了 是在寫應用。
那為什么要用webpack去寫呢 我自己認為就是裝高大上 。 比如舊時代的引用css文件 你只需要在html里插入一條link href=”xxxx.css”足以。而新時代除了你要裝各種loader加載器, 那個css也是通過less,sass編譯出來的 更要命的 你必須要在js里requeie你那個css文件(萬物皆模塊,當然也有解決方案 但配置更復雜了 裝插件提取之類） 然后最終打包插入到html里 。舉個現實例子吧 至少我是這么想的
你到超市買瓶水 你只要去貨架挑好水然后去櫃台找服務員結賬就行了 。但這家超市是自助服務 你要先點擊屏幕 選購水
支付寶 掃碼 如果你支付寶沒有綁定銀行卡還要去次銀行 多麻煩啊 。大哥我只是要水 有那么麻煩嗎
這種觀念呢 誰都不是絕對正確的 。畢竟時代在進步 你現在支付寶都沒 也都不好意思出門吧 第一次確實麻煩了 但習慣就習慣了 。 直接買是簡單快有效 但身上沒零錢 或者已經是三更半夜怎么辦。 自助確實方便 但萬一哪天機器出故障 自己怎么死的都不知道 參考砸arm機的人 各位不妨去樓下買瓶水就知道自己的心理了。
回到前端話題 這種思想就是現代的前端思想。。 很多事情都是自動完成的。人家下個插件或者游戲 還要 打開官網 點擊下載 解壓 而npm install 一句話就安裝完了 真的覺得很不可思議 其實最初這種觀念存在linux yum命令 所以 前端那些新東西 基本都是后台大佬帶過來的
也許在不久的未來 下一代前端會覺得 web的正確寫法就是那樣 我懷疑我是一個假前端了。。
最重要的是
最重要的是
最重要的是
不管是哪個時代 客戶是最傻的。他們不會覺得哪個方案好 更不會查看源碼去看 。他們只會點 會滑（handle ) 等等去觸發（event )事件 來交互數據。只要在體驗過程中 能點 能滑 很流暢 (追求性能)
那么用戶happy 老板happy 你也happy 反之 你懂的。。。
發個fgo圖 鼓勵下自己吧
軍師在手天下我有。。
東西
說了半天 來看了博客,想要的東西 我還沒給呢 我呢 還是各取優長 . 我覺得web沒必要像app那么復雜 不開心啊 萬物皆js有點太那個了 (webpack有取代gulp的沖勢) 所以還是以gulp 為核心 html css 還是那原汁原味的 但js 需webpack編譯處理 最好帶個熱刷新 方便構建網頁
基於這套思路我嘗試在github上找 發現網易 確實有款符合我想象中的要求 但 玩下來一看 雖然能轉但年代有點遠 webpack都停留在beta階段 用的還是livereload 很老了 。 人家敢放出來很好了 現在新的內部的肯定留給自己用吧。
自己下了個后開始嘗試融合了些符合自己品味的東西 希望就去用吧 別忘了加星 提提意見哈
地址 https://github.com/lanbosm/gulp-webpack-demo
畢竟實力有限 還不是很完善 希望通過以后的努力變得更完善。
如果效果覺得行那么可以看下面源碼分析 給萌新們看的 大佬們就不要給我打臉了