歡迎關注個人公衆號 css
學習的內容以下前端
開始vue
npm的使用 npm
安裝一些包會出現問題,極可能問題的緣由是咱們的網絡。npm
的包的安裝源有挺多,默認是npm
,若是在國內,咱們能夠把安裝源切換成taobao
,這樣安裝的速度會快不少。jquery
# 先用 npm 安裝 nrm 小工具
npm install nrm --global
# 安裝後查看如今的 npm 的安裝源
nrm ls
# 切換使用 taobao 做爲 npm 的安裝源
nrm use taobao
# 查看當前安裝源用的是什麼
nrm ls
複製代碼
注意有時候你使用taobao
做爲安裝源也可能會遇到一些問題,這時候能夠暫時再把安裝源再切換成原來的 npm
。webpack
網頁中靜態資源web
JSnpm
CSS設計模式
Images瀏覽器
字體文件sass
(Fonts) 模板文件
網頁中靜態資源多了的問題?
一、加載速度慢,由於咱們要發起不少的二次請求;
二、要處理賦複雜的依賴關係
如何解決問題?
一、合併、壓縮、精靈圖、圖片的Base64編碼(url直接指向Base64)
二、使用requireJS、也可使用webpack能夠解決依賴關係
什麼是webpack?
webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時,它會遞歸地構建一個依賴關係圖(dependency graph),其中包含應用程序須要的每一個模塊,而後將全部這些模塊打包成一個或多個 bundle。基於Node.js 開發出來的前端工具
完美的解決方法
一、基於Gulp,基於 task 任務的
二、使用webpack,是基於整個項目進行構建的
webpack的案例
jQuery 是一個快速、簡潔的JavaScript框架,是繼Prototype以後又一個優秀的JavaScript代碼庫(或JavaScript框架)。jQuery設計的宗旨是「write Less,Do More」,即倡導寫更少的代碼,作更多的事情。它封裝JavaScript經常使用的功能代碼,提供一種簡便的JavaScript設計模式,優化HTML文檔操做、事件處理、動畫設計和Ajax交互。
裝jquery 一、npm init
因爲ES6的代碼,過高級了,瀏覽器解析不了,因此,這一行執行會報錯import $ from 'jquery'
如何解決呢?使用webpack
幫助咱們處理。 一、安裝webpack npm i webpack -g
npm i webpack -g
全局安裝webpack,這樣可以全局使用webpack
二、在項目的根目錄中運行 npm i webpack --save -dev
安裝到項目的依賴中去
npm init
初始化項目,使用npm管理項目中的依賴包 二、建立項目的目錄結構
npm i jquery --save
安裝jQuery的依賴包 四、建立 main,js
並書寫代碼邏輯 五、webpack .\src\main.js -o .\dist\bundle.js
最新的打包命令,意思是 : webpack 入口文件路徑 輸出文件的路徑
webpack
能作什麼事情