Vue.js學習No.5(WebPack)

  • 歡迎關注個人公衆號 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 做爲安裝源也可能會遇到一些問題,這時候能夠暫時再把安裝源再切換成原來的 npmwebpack

image.png

webpack

  • 網頁中靜態資源web

  • JSnpm

    • .js .jsx .coffee .ts(TypeScript C#)
  • CSS設計模式

    • .css .less .sass(基本上沒有人用了) .scss
  • Images瀏覽器

    • .jpe .png .gif .bmp .svg
  • 字體文件sass

    • .svg .ttf .eot .woff .woff2
  • (Fonts) 模板文件

    • .ejs .jade .vue(在weppack中定義組件的方式,推薦使用)
  • 網頁中靜態資源多了的問題?

  • 一、加載速度慢,由於咱們要發起不少的二次請求;

  • 二、要處理賦複雜的依賴關係

  • 如何解決問題?

  • 一、合併、壓縮、精靈圖、圖片的Base64編碼(url直接指向Base64)

  • 二、使用requireJS、也可使用webpack能夠解決依賴關係

  • 什麼是webpack?

  • webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時,它會遞歸地構建一個依賴關係圖(dependency graph),其中包含應用程序須要的每一個模塊,而後將全部這些模塊打包成一個或多個 bundle。基於Node.js 開發出來的前端工具

webpack

image.png

  • 完美的解決方法

  • 一、基於Gulp,基於 task 任務的

  • 二、使用webpack,是基於整個項目進行構建的

    • webpack自動化構建工具,能夠完美的實現資源的合併、打包、壓縮、混淆等諸多功能
  • webpack的案例

  • jQuery 是一個快速、簡潔的JavaScript框架,是繼Prototype以後又一個優秀的JavaScript代碼庫(或JavaScript框架)。jQuery設計的宗旨是「write Less,Do More」,即倡導寫更少的代碼,作更多的事情。它封裝JavaScript經常使用的功能代碼,提供一種簡便的JavaScript設計模式,優化HTML文檔操做、事件處理、動畫設計和Ajax交互。

  • 裝jquery 一、npm init

    image.png
    二、 npm i jquery -s
    image.png
    三、 自動生成
    image.png

  • 因爲ES6的代碼,過高級了,瀏覽器解析不了,因此,這一行執行會報錯import $ from 'jquery'

    image.png

  • 如何解決呢?使用webpack幫助咱們處理。 一、安裝webpack npm i webpack -g npm i webpack -g 全局安裝webpack,這樣可以全局使用webpack

image.png

二、在項目的根目錄中運行 npm i webpack --save -dev 安裝到項目的依賴中去

  • 使用webpack打包構建 一、運行 npm init 初始化項目,使用npm管理項目中的依賴包 二、建立項目的目錄結構
    image.png
    三、使用 npm i jquery --save 安裝jQuery的依賴包 四、建立 main,js並書寫代碼邏輯 五、webpack .\src\main.js -o .\dist\bundle.js最新的打包命令,意思是 : webpack 入口文件路徑 輸出文件的路徑
    image.png
  • 打包完成
    image.png

webpack 能作什麼事情

  • 1 、webpack 可以處理 JS 文件的互相依賴關係:理想狀態一個項目只有一個main.js 可是不推薦
  • 二、webpack 可以處理Js的兼容的問題,把高級的瀏覽器不識別的語法轉化爲低級的瀏覽器可以執行的
  • 運行的命令格式 :webpack 要打包的文件的路徑 -o 輸出文件的路徑
相關文章
相關標籤/搜索