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一起安裝的包管理工具
