- 學習的内容如下
- 開始
- npm的使用 npm安裝一些包會出現問題，很可能問題的原因是我們的網絡。npm 的包的安裝源有挺多，預設是npm，如果在國内，我們可以把安裝源切換成taobao，這樣安裝的速度會快很多。
# 先用 npm 安裝 nrm 小工具npm install nrm --global# 安裝後檢視現在的 npm 的安裝源nrm ls# 切換使用 taobao 作為 npm 的安裝源nrm use taobao# 檢視目前安裝源用的是什麼nrm ls複制代碼
注意有時候你使用taobao 作為安裝源也可能會遇到一些問題，這時候可以暫時再把安裝源再切換成原來的 npm 。
webpack
- 網頁中靜态資源
- JS
- .js .jsx .coffee .ts(TypeScript C#)
- CSS
- .css .less .sass(基本上沒有人用了) .scss
- Images
- .jpe .png .gif .bmp .svg
- 字型檔案
- .svg .ttf .eot .woff .woff2
- (Fonts) 模闆檔案
- .ejs .jade .vue(在weppack中定義元件的方式，推薦使用)
- 網頁中靜态資源多了的問題？
- 1、加載速度慢，因為我們要發起很多的二次請求；
- 2、要處理賦複雜的依賴關系
- 如何解決問題？
- 1、合并、壓縮、精靈圖、圖檔的Base64編碼(url直接指向Base64)
- 2、使用requireJS、也可以使用webpack可以解決依賴關系
- 什麼是webpack？
- webpack 是一個現代 JavaScript 應用程式的靜态子產品打包器(module bundler)。當 webpack 處理應用程式時，它會遞歸地建構一個依賴關系圖(dependency graph)，其中包含應用程式需要的每個子產品，然後将所有這些子產品打包成一個或多個 bundle。基于Node.js 開發出來的前端工具
webpack
- 完美的解決方法
- 1、基于Gulp，基于 task 任務的
- 2、使用webpack，是基于整個項目進行建構的
- webpack自動化建構工具，可以完美的實作資源的合并、打包、壓縮、混淆等諸多功能
- webpack的案例
- jQuery 是一個快速、簡潔的JavaScript架構，是繼Prototype之後又一個優秀的JavaScript代碼庫(或JavaScript架構)。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax互動。
- 裝jquery 1、npm init
- 2、 npm i jquery -s
- 3、 自動生成
- 由于ES6的代碼，太進階了，浏覽器解析不了，是以，這一行執行會報錯import $ from 'jquery'
- 如何解決呢？使用webpack幫助我們處理。 1、安裝webpack npm i webpack -g npm i webpack -g 全局安裝webpack，這樣能夠全局使用webpack
2、在項目的根目錄中運作 npm i webpack --save -dev 安裝到項目的依賴中去
- 使用webpack打包建構 1、運作 npm init 初始化項目，使用npm管理項目中的依賴包 2、建立項目的目錄結構
- 3、使用 npm i jquery --save 安裝jQuery的依賴包 4、建立 main,js并書寫代碼邏輯 5、webpack .srcmain.js -o .distbundle.js最新的打包指令,意思是 ： webpack 入口檔案路徑 輸出檔案的路徑
- 打包完成
webpack 能做什麼事情
- 1 、webpack 能夠處理 JS 檔案的互相依賴關系：理想狀态一個項目隻有一個main.js 但是不推薦
- 2、webpack 能夠處理Js的相容的問題，把進階的浏覽器不識别的文法轉化為低級的浏覽器能夠執行的
- 運作的指令格式 ：webpack 要打包的檔案的路徑 -o 輸出檔案的路徑