webpack 使用指南-緒論

Nosee 發布于2019-08-21 17:38 / 428人閱讀

摘要：在講解之前先回顧一下筆者在項目開發中的工作流變化時代此時工作流大致為結合插件處理視圖處理樣式等庫此時由于依賴少手動引入各種標簽結合調試界面時代利用指令服務控制器將邏輯拆分為多個文件利用編譯會將分為全局樣式和組件樣式下載各種依賴此時任需要手動

在講解 webpack 之前先回顧一下筆者在項目開發中的工作流變化.

jquery 時代

此時工作流大致為

jquery 結合插件處理視圖

bootstap 處理樣式

lodash, underscore 等庫

此時由于依賴少,手動引入各種標簽,結合 phpstorm,chrome 調試界面

angularjs1.x 時代

利用指令,服務,控制器將邏輯拆分為多個 js 文件

利用 sass 編譯 css,會將 scss 分為全局樣式和組件樣式.

bower 下載各種依賴

此時任需要手動管理各種依賴.少做的事情包括

css 采用 sass 集中編譯壓縮為一個文件

存在的問題.

需要手動載入多個 js 文件

需要管理不同 js 文件的依賴關系

angularjs1.x + node 進化版

grunt 處理任務工作流(中途也用過 gulp 原理差不多),核心任務包括

watch 文件變化

將 sass 的編譯工作放入其中

將分離的 js 文件打包合,混淆放入其中

利用 browserify 管理 js 的依賴

selenium 測試前端界面層

karma + mocha 測試接口邏輯層

npm script + shell 封裝一些常用操作例如數據庫導入,運行測試等

此時任需要手動加載資源,但是此時只用加載編譯后的單個文件即可,少做的事情包括

js 依賴引入減少

工作流半自動化

存在的問題

任需手動引入各種依賴

vue 時代

使用 vue-cli 一鍵初始化項目

編寫 vue 模板,修改路由文件

使用 vuex,vue-source 等工具處理業務邏輯

可以看到整個項目的開發從原始的資源引用模式.
進化到基于后端 node 的編譯開發時代.

webpack 作為一個工具完成了那些事情呢?

整合了從項目的資源引入到編譯打包的一系列工作

基于此某種程度上可以講 webpack 理解為現代前端開發中的編譯器(原諒我的概念定義)

將各種不同的前端資源編譯打包為一個可以在瀏覽器端運行的程序

從這個角度再看一下 webpack 的核心概念

entry 入口文件.類似編譯主文件,基于此解析依賴關系

output 輸出文件,編譯結果

loaders 加載器模塊,用來解析編譯不同的文件類型,例如將 sass 轉為 css,typescript 編譯為 js 等

plugins 插件模塊,在編譯不同階段執行任務,例如壓縮混淆輸出,啟動 http 服務等

可以看到 webpack 將原來資源引入,編譯,文件監聽等各種任務,
分散到基于 loaders,plugins 的模塊體系中完成.

在工作模式上 webpack 和 grunt,gulp 差不多.都是基于插件體系.
但是注意如下區別

gulp,gurnt 更側重解決多個任務的集成.之所以用來編譯是基于你的配置的

webpack 更側重于解決資源的引用,編譯打包,同時結合插件做更多的事情.

總結 webpack 的學習重點如下

核心配置選項的學習

各種 loaders 模塊的配置學習

實際上很多時候只需利用 npm 安裝該 loaders 再引入即可

各種 plugins 模塊的配置學習

學習 webpack 之前你需要那些基礎呢?

對前端的編譯工作流有基本認識,知道為什么需要編譯及它的價值?最好使用過
browserify,grunt,gulp 等類似工具.

對 node 有基礎的學習,例如告訴我 npm 是如何查找依賴的?

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89810.html

數據結構與算法—緒論

摘要：數據結構是指相互之間存在一種或多種特定關系的數據元素的集合。一個數據元素由若干數據項構成可認為是一個對象或者是數據庫的一條記錄。抽象數據類型抽象數據類型是一個實現包括儲存數據元素的存儲結構以及實現基本操作的算法。前言重要性數據結構與算法是程序員內功體現的重要標準之一，而數據結構的也應用在各個方面，更有程序=數據結構+算法這個等式存在。各個中間件開發者，架構師。他們都在努力的優化中...

Tecode 2019-08-19 10:27 評論0 收藏0
《設計模式》1.緒論

摘要：設計模式是一套被反復使用的多數人知曉的經過分類編目的代碼設計經驗的總結。使用設計模式是為了重用代碼讓代碼更容易被他人理解保證代碼可靠性。由此可見，其實設計模式就是從大型軟件架構出發便于升級和維護的軟件設計思想，它強調降低依賴，降低耦合。點擊進入我的博客 1.1 設計模式概述什么是設計模式設計模式是軟件開發人員在軟件開發過程中面臨的一般問題的解決方案。設計模式是一套被反復使用的、...

bovenson 2019-08-16 13:52 評論0 收藏0
Python入門學習筆記匯總

摘要：導語本文章匯總了本人在學習基礎之緒論篇數據結構篇函數篇面向對象篇控制流程篇和元編程篇學習筆記的鏈接，打算入門的朋友們可以按需查看并交流。導語：本文章匯總了本人在學習Python基礎之緒論篇、數據結構篇、函數篇、面向對象篇、控制流程篇和元編程篇學習筆記的鏈接，打算入門Python的朋友們可以按需查看并交流。第一部分：緒論篇 1、Python數據模型第二部分：數據結構篇 2、序列構成...

U2FsdGVkX1x 2019-07-30 16:04 評論0 收藏0