webpack 使用指南-緒論

在講解 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 以前你須要那些基礎呢?

1. 對前端的編譯工做流有基本認識,知道爲何須要編譯及它的價值?最好使用過
   browserify,grunt,gulp 等相似工具.

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