資訊專欄INFORMATION COLUMN
摘要：在講解之前先回顧一下筆者在項(xiàng)目開(kāi)發(fā)中的工作流變化時(shí)代此時(shí)工作流大致為結(jié)合插件處理視圖處理樣式等庫(kù)此時(shí)由于依賴少手動(dòng)引入各種標(biāo)簽結(jié)合調(diào)試界面時(shí)代利用指令服務(wù)控制器將邏輯拆分為多個(gè)文件利用編譯會(huì)將分為全局樣式和組件樣式下載各種依賴此時(shí)任需要手動(dòng)
在講解 webpack 之前先回顧一下筆者在項(xiàng)目開(kāi)發(fā)中的工作流變化.
jquery 時(shí)代此時(shí)工作流大致為
jquery 結(jié)合插件處理視圖
bootstap 處理樣式
lodash, underscore 等庫(kù)
此時(shí)由于依賴少,手動(dòng)引入各種標(biāo)簽,結(jié)合 phpstorm,chrome 調(diào)試界面
angularjs1.x 時(shí)代利用指令,服務(wù),控制器將邏輯拆分為多個(gè) js 文件
利用 sass 編譯 css,會(huì)將 scss 分為全局樣式和組件樣式.
bower 下載各種依賴
此時(shí)任需要手動(dòng)管理各種依賴.少做的事情包括
css 采用 sass 集中編譯壓縮為一個(gè)文件
存在的問(wèn)題.
需要手動(dòng)載入多個(gè) js 文件
需要管理不同 js 文件的依賴關(guān)系
angularjs1.x + node 進(jìn)化版
grunt 處理任務(wù)工作流(中途也用過(guò) gulp 原理差不多),核心任務(wù)包括
watch 文件變化
將 sass 的編譯工作放入其中
將分離的 js 文件打包合,混淆放入其中
利用 browserify 管理 js 的依賴
selenium 測(cè)試前端界面層
karma + mocha 測(cè)試接口邏輯層
npm script + shell 封裝一些常用操作例如數(shù)據(jù)庫(kù)導(dǎo)入,運(yùn)行測(cè)試等
此時(shí)任需要手動(dòng)加載資源,但是此時(shí)只用加載編譯后的單個(gè)文件即可,少做的事情包括
js 依賴引入減少
工作流半自動(dòng)化
存在的問(wèn)題
任需手動(dòng)引入各種依賴
vue 時(shí)代使用 vue-cli 一鍵初始化項(xiàng)目
編寫(xiě) vue 模板,修改路由文件
使用 vuex,vue-source 等工具處理業(yè)務(wù)邏輯
可以看到整個(gè)項(xiàng)目的開(kāi)發(fā)從原始的資源引用模式.
進(jìn)化到基于后端 node 的編譯開(kāi)發(fā)時(shí)代.
webpack 作為一個(gè)工具完成了那些事情呢?
整合了從項(xiàng)目的資源引入到編譯打包的一系列工作
基于此某種程度上可以講 webpack 理解為現(xiàn)代前端開(kāi)發(fā)中的編譯器(原諒我的概念定義)
將各種不同的前端資源編譯打包為一個(gè)可以在瀏覽器端運(yùn)行的程序
從這個(gè)角度再看一下 webpack 的核心概念
entry 入口文件.類似編譯主文件,基于此解析依賴關(guān)系
output 輸出文件,編譯結(jié)果
loaders 加載器模塊,用來(lái)解析編譯不同的文件類型,例如將 sass 轉(zhuǎn)為 css,typescript 編譯為 js 等
plugins 插件模塊,在編譯不同階段執(zhí)行任務(wù),例如壓縮混淆輸出,啟動(dòng) http 服務(wù)等
可以看到 webpack 將原來(lái)資源引入,編譯,文件監(jiān)聽(tīng)等各種任務(wù),
分散到基于 loaders,plugins 的模塊體系中完成.
在工作模式上 webpack 和 grunt,gulp 差不多.都是基于插件體系.
但是注意如下區(qū)別
gulp,gurnt 更側(cè)重解決多個(gè)任務(wù)的集成.之所以用來(lái)編譯是基于你的配置的
webpack 更側(cè)重于解決資源的引用,編譯打包,同時(shí)結(jié)合插件做更多的事情.
總結(jié) webpack 的學(xué)習(xí)重點(diǎn)如下
核心配置選項(xiàng)的學(xué)習(xí)
各種 loaders 模塊的配置學(xué)習(xí)
實(shí)際上很多時(shí)候只需利用 npm 安裝該 loaders 再引入即可
各種 plugins 模塊的配置學(xué)習(xí)
學(xué)習(xí) webpack 之前你需要那些基礎(chǔ)呢?
對(duì)前端的編譯工作流有基本認(rèn)識(shí),知道為什么需要編譯及它的價(jià)值?最好使用過(guò)
browserify,grunt,gulp 等類似工具.
對(duì) node 有基礎(chǔ)的學(xué)習(xí),例如告訴我 npm 是如何查找依賴的?
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89810.html
摘要：數(shù)據(jù)結(jié)構(gòu)是指相互之間存在一種或多種特定關(guān)系的數(shù)據(jù)元素的集合。一個(gè)數(shù)據(jù)元素由若干數(shù)據(jù)項(xiàng)構(gòu)成可認(rèn)為是一個(gè)對(duì)象或者是數(shù)據(jù)庫(kù)的一條記錄。抽象數(shù)據(jù)類型抽象數(shù)據(jù)類型是一個(gè)實(shí)現(xiàn)包括儲(chǔ)存數(shù)據(jù)元素的存儲(chǔ)結(jié)構(gòu)以及實(shí)現(xiàn)基本操作的算法。 前言 重要性 數(shù)據(jù)結(jié)構(gòu)與算法是程序員內(nèi)功體現(xiàn)的重要標(biāo)準(zhǔn)之一，而數(shù)據(jù)結(jié)構(gòu)的也應(yīng)用在各個(gè)方面，更有程序=數(shù)據(jù)結(jié)構(gòu)+算法這個(gè)等式存在。各個(gè)中間件開(kāi)發(fā)者，架構(gòu)師。他們都在努力的優(yōu)化中...
摘要：設(shè)計(jì)模式是一套被反復(fù)使用的多數(shù)人知曉的經(jīng)過(guò)分類編目的代碼設(shè)計(jì)經(jīng)驗(yàn)的總結(jié)。使用設(shè)計(jì)模式是為了重用代碼讓代碼更容易被他人理解保證代碼可靠性。由此可見(jiàn)，其實(shí)設(shè)計(jì)模式就是從大型軟件架構(gòu)出發(fā)便于升級(jí)和維護(hù)的軟件設(shè)計(jì)思想，它強(qiáng)調(diào)降低依賴，降低耦合。 點(diǎn)擊進(jìn)入我的博客 1.1 設(shè)計(jì)模式概述 什么是設(shè)計(jì)模式 設(shè)計(jì)模式是軟件開(kāi)發(fā)人員在軟件開(kāi)發(fā)過(guò)程中面臨的一般問(wèn)題的解決方案。設(shè)計(jì)模式是一套被反復(fù)使用的、...
摘要：導(dǎo)語(yǔ)本文章匯總了本人在學(xué)習(xí)基礎(chǔ)之緒論篇數(shù)據(jù)結(jié)構(gòu)篇函數(shù)篇面向?qū)ο笃刂屏鞒唐驮幊唐獙W(xué)習(xí)筆記的鏈接，打算入門(mén)的朋友們可以按需查看并交流。 導(dǎo)語(yǔ)：本文章匯總了本人在學(xué)習(xí)Python基礎(chǔ)之緒論篇、數(shù)據(jù)結(jié)構(gòu)篇、函數(shù)篇、面向?qū)ο笃?、控制流程篇和元編程篇學(xué)習(xí)筆記的鏈接，打算入門(mén)Python的朋友們可以按需查看并交流。 第一部分：緒論篇 1、Python數(shù)據(jù)模型 第二部分：數(shù)據(jù)結(jié)構(gòu)篇 2、序列構(gòu)成...
閱讀 2950·2021-11-15 18:02
閱讀 3843·2021-10-14 09:43
閱讀 3796·2021-09-08 10:41
閱讀 2550·2019-08-30 15:53
閱讀 1837·2019-08-30 14:14
閱讀 1989·2019-08-29 16:12
閱讀 3179·2019-08-29 14:03
閱讀 1308·2019-08-29 13:46
