關於webpack的理解和npm的使用


Webpack 入門教程

Webpack 是一個前端資源加載/打包工具。它將根據模塊的依賴關系進行靜態分析,然后將這些模塊按照指定的規則生成對應的靜態資源。

從圖中我們可以看出,Webpack 可以將多種靜態資源 js、css、less 轉換成一個靜態文件,減少了頁面的請求。

接下來我們簡單為大家介紹 Webpack 的安裝與使用。

 

安裝 Webpack

在安裝 Webpack 前,你本地環境需要支持 node.js

由於 npm 安裝速度慢,本教程使用了淘寶的鏡像及其命令 cnpm,安裝使用介紹參照:使用淘寶 NPM 鏡像

使用 cnpm 安裝 webpack:

cnpm install webpack -g

 

NPM 使用介紹

NPM是隨同NodeJS一起安裝的包管理工具,能解決NodeJS代碼部署上的很多問題,常見的使用場景有以下幾種:

  • 允許用戶從NPM服務器下載別人編寫的第三方包到本地使用。
  • 允許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。
  • 允許用戶將自己編寫的包或命令行程序上傳到NPM服務器供別人使用。

由於新版的nodejs已經集成了npm,所以之前npm也一並安裝好了。同樣可以通過輸入 "npm -v" 來測試是否成功安裝。命令如下,出現版本提示表示安裝成功: 

$ npm -v
2.3.0

如果你安裝的是舊版本的 npm,可以很容易得通過 npm 命令來升級,命令如下:

$ sudo npm install npm -g
/usr/local/bin/npm -> /usr/local/lib/node_modules/npm/bin/npm-cli.js
npm@2.14.2 /usr/local/lib/node_modules/npm

如果是 Window 系統使用以下命令即可:

npm install npm -g

使用淘寶鏡像的命令:

cnpm install npm -g

  

 總結:

vue.js ----> 需要webpack打包 -----> 本地需要支持node.js ----> 利用淘寶鏡像安裝(npm命令)---->npm命令
是隨同node.js一起安裝的包管理工具


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM