1.nvm（node version manager）安裝與使用

(1)What is nvm?

[nvm](https://github.com/creationix/nvm)是一個node的版本管理工具，使用nvm可以同時(shí)安裝和使用多個版本的node。

(2)nvm的安裝和升級

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash

(3)常用命令

- 列出所有node遠(yuǎn)程版本：`nvm ls-remote` - 安裝指定版本的node：`nvm install v7.6.0` - 列出所有已安裝node版本：`nvm ls` - 切換node版本：`nvm use v7.5.0` - 設(shè)置默認(rèn)node版本：`nvm alias default v7.5.0`

(4)使用.nvmrc

如果項(xiàng)目需要使用指定版本的node，可以在項(xiàng)目根目錄建立.nvmrc文件，寫入版本號，之后直接執(zhí)行`nvm use`命令記了直接使用文件中配置的node版本

(5)提示

- 使用nvm安裝的node保存在nvm管理的版本路徑：`/Users/Violin/.nvm/versions/node` - 之后使用npm或者yarn全局安裝的node模塊都會保存在安裝時(shí)所使用的node版本中

2.webpack中package.json文件

(1)package.json文件的作用

每個項(xiàng)目的根目錄下都會有一個package.json文件，該文件使用一個json對象定義了項(xiàng)目的配置信息，如名字、作者、代碼庫地址等，同時(shí)定義了項(xiàng)目所需要的編譯時(shí)和運(yùn)行時(shí)依賴。

(2)package.json文件示例

```javascript { "name": "webpack-demo-yzj", "version": "1.0.0", "description": "Learning webpack.", "main": "index.js", "scripts": { "dev": "webpack-dev-server --devtool eval --progress --colors", "deploy": "NODE_ENV=production webpack -p" }, "keywords": ["webpack", "react"], "author": "Jason Yu <onthink@foxmail.com>", "license": "MIT", "repository": "yuzj/webpack-demo-yzj", "devDependencies": { "babel-core": "^6.23.1", "babel-loader": "^6.3.2", "babel-preset-es2015": "^6.22.0", "babel-preset-react": "^6.23.0", "react": "^15.4.2", "react-dom": "^15.4.2", "react-router": "^3.0.2", "webpack": "^2.2.1" }, "dependencies": { "jquery": "^3.1.1" } } ```

(3)重要字段說明

- `script字段`：該字段指向一個對象，該對象指定了可運(yùn)行的npm命令行縮寫 - `dependencies字段`：該字段指向一個對象，該對象指定了項(xiàng)目運(yùn)行時(shí)所需要的模塊，使用`npm install --save`命令安裝的模塊會被保存在這個對象中，由所安裝的模塊名和版本號組成 - `devDependencies字段`：該對象指向一個對象，該對象制定了項(xiàng)目編譯時(shí)所需要的模塊，使用`npm install --save-dev`命令安裝的模塊會被保存在這個對象中，其它同上

(4)提示

- 其他字段用途請參考文檔 - package.json文件中不允許注釋，任何注釋行都會導(dǎo)致編譯時(shí)錯誤

3.Webpack模塊打包工具

(1)安裝方式

webpack的安裝可以選擇作為全局的node模塊安裝，通過這種方式安裝webpack可以直接調(diào)用webpack命令行； webpack也可以作為項(xiàng)目依賴的node模塊安裝，通過這種方式安裝的webpack需要手動查找webpack可執(zhí)行文件路徑執(zhí)行webpack命令，當(dāng)然，也可以通過package.json文件中的script字段配置為npm命令行調(diào)用。 最簡單的webpack命令示例`webpack main.js bundle.js`,該命令的意思為講`main.js`文件打包輸出為名為`bundle.js`文件。

(2)常用命令

`webpack`： 一次性打包項(xiàng)目所需模塊 `webpack -p`：一次性打包項(xiàng)目所需模塊，同時(shí)進(jìn)行壓縮 `webpack -d`：打包項(xiàng)目所需模塊，包含資源映射

(3)webpack.config.js配置文件

該配置文件位于項(xiàng)目根目錄中，利用配置文件，我們可以將重復(fù)或者復(fù)雜的webpack參數(shù)或操作預(yù)先配置，方便之后的使用。

(4)webpack.config.js文件示例

```javascript module.exports = { entry: './main.jsx', //entry字段定義了需要打包的文件入口，可以使用字符串和對象直接量，定義單個或多個入口 output: { //output字段定義了打包后的文件出口 filename: 'bundle.js' }, module: { //定義webpack所需要的模塊 loaders:[ //定義各種loader { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', } ] } }; ```

4.Babel和Loaders

Babel本質(zhì)上是一個轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有瀏覽器環(huán)境中執(zhí)行由ES6語法編寫的代碼。例如： ```javascript //ES6箭頭函數(shù) input.map(item => item + 1); //轉(zhuǎn)碼后的ES5語法 input.map(function (item) { return item + 1; }); ```

Webpack本身只能處理JavaScript模塊，如果要處理其他類型的文件，就需要使用loader進(jìn)行轉(zhuǎn)換。 Loader可以理解為是模塊和資源的轉(zhuǎn)換器，它本身是一個函數(shù)，接受源文件作為參數(shù)，返回轉(zhuǎn)換的結(jié)果。這樣，我們就可以通過webpack來打包各種類型的模塊或文件，如.jsx文件、.less文件等。

下面我們用上面的東西構(gòu)建一個react項(xiàng)目

5.Hello React！

(1)新建項(xiàng)目根目錄并進(jìn)行初始化

``` mkdir workshop-demo-yzj cd workshop-demo-yzj npm init -y ```

(2)項(xiàng)目安裝webpack

``` npm install webpack --save-dev ```

(3)使用webpack

直接通過`node_modules/.bin/webpack`命令使用

上面就是利用webpack構(gòu)建一個項(xiàng)目的大概流程了,更多關(guān)于webpack的使用,還需要你親自去了解了

天行健,君子以自強(qiáng)不息

地勢坤,君子以厚德載物