Webpack介紹：
一款前端資源打包工具对省，可以將JavaScript藕夫、image垢村、css等資源
當(dāng)成一個(gè)模塊進(jìn)行打包秸苗，Webpack是基于node.js
Node.js介紹：
什么是 Node.js，眾所周知 javascript 是在瀏覽器上運(yùn)行的腳本語
言这橙，主要用來控制 html 元素，即 html dom 對(duì)象，是純粹的 客戶端語言抽米。
那么要和服務(wù)端交互，就需要等待服務(wù)端的開發(fā)人員糙置，而服務(wù)端開發(fā)又以
java 居多云茸，對(duì)于不了解 java 語言的前端開發(fā)人員，有的時(shí)候就不得不干等
著服務(wù)端準(zhǔn)備好谤饭，很多時(shí)候标捺，青春就在這樣的尬等中消逝了。
那么于是就有人想揉抵，如果服務(wù)端也是用 javascript 開寫的話亡容，那么前端人員
不是很容易也可以開發(fā)服務(wù)端的東西了嗎？ 于是就有大佬開發(fā)了一個(gè) v8 引
擎冤今，它在服務(wù)端運(yùn)行 javascript 語言闺兢，在這個(gè)基礎(chǔ)上再進(jìn)行了一定的發(fā)展，
就出現(xiàn)了可以在服務(wù)端運(yùn)行的 javascript戏罢， 它就叫做 node.js 了屋谭。
可以把 node.js 簡(jiǎn)單的看成 javascript 寫的 tomcat ...
cnpm介紹：
npm 命令用于從國(guó)外的服務(wù)器上下載別人做好的模塊。 因?yàn)槭窃趪?guó)
外的服務(wù)器龟糕，有的時(shí)候網(wǎng)速會(huì)很受影響桐磁，其結(jié)果就是導(dǎo)致下載會(huì)非常卡頓讲岁。
所以這個(gè)時(shí)候就會(huì)用到 cnpm了我擂。這里的c 是 copy的意思，即復(fù)制 npm 上面
的庫催首。
把npm 上面的庫復(fù)制到 國(guó)內(nèi)的服務(wù)器上扶踊，當(dāng)需要用的時(shí)候，使用 cnpm 命令
獲取郎任，就會(huì)快很多了秧耗。
安裝Node.js
1、下載安裝
2舶治、cmd測(cè)試：node -v
安裝cnpm和npm
1分井、安裝指令：npm install -g cnpm --registry=https://registry.npm.taobao.org
2车猬、測(cè)試是否成功：cnpm -v
3、配置cnpm的下載路徑：
a) cnpm config set prefix "E:\system\web-xczx\Node.Js\cnpm_modules"
b) cnpm config set cache "E:\system\web-xczx\Node.Js\cnpm_cache"
cmd測(cè)試配置是否成功：cnpm config ls
4尺锚、配置npm的下載路徑：
a) npm config set prefix "E:\system\web-xczx\Node.Js\npm_modules"
b) npm config set cache "E:\system\web-xczx\Node.Js\npm_cache"
cmd測(cè)試配置是否成功：npm config ls
5珠闰、path環(huán)境配置（npm的prefix地址）：E:\system\web-xczx\Node.Js\npm_modules
6、安裝nrm：cnpm install -g nrm
6-1瘫辩、查看鏡像：nrm ls
6-2伏嗜、設(shè)置淘寶鏡像： nrm use taobao
7、安裝node-sass：npm install node-sass
7-1伐厌、查看版本：node-sass -v
圖片.png
安裝babel
1承绸、bable是es6轉(zhuǎn)es5的轉(zhuǎn)碼器
2、指令：npm install --global babel-cli
3挣轨、驗(yàn)證：babel --version
4军熏、安裝es2015
5、指令：npm install babel-preset-es2015 --save-dev
6卷扮、安裝成功看圖
圖片.png
安裝webpack
1荡澎、全局安裝指令： cnpm install -g webpack@1.13.2
2、cmd測(cè)試：webpack
圖片.png
使用webpack打包（命令方式）
1晤锹、寫一個(gè)model.js文件摩幔，內(nèi)容：document.write("hello webpack");
2、切換到該js文件下抖甘，執(zhí)行： webpack model.js bundle.js
3热鞍、寫一個(gè)html文件，引入bundle.js衔彻，寫法如下：
<script src="bundle.js"></script>
4薇宠、訪問html文件
使用webpack打包（Vue方式）
1、寫一個(gè)model.js文件艰额，內(nèi)容：document.write("hello webpack");
2澄港、再寫一個(gè)webpack.config.js文件，內(nèi)容：
module.exports = {
entry:'./model.js',
output:{
filename: 'bundle.js'
}
}
3柄沮、切換到mode.js文件下回梧，執(zhí)行命令：webpack
webpack-dev-server（命令行）
前面是直接通過瀏覽器打開 index.html 的頁面，這種情況與實(shí)際的項(xiàng)目是有
區(qū)別的祖搓，因?yàn)閷?shí)際項(xiàng)目通常都會(huì)是在一個(gè)服務(wù)器上打開 index.html.
webpack-dev-server 是什么呢狱意？ 它其實(shí)就是一個(gè)微服務(wù)器，運(yùn)行它拯欧，也就啟
動(dòng)了一個(gè) web 服務(wù)器详囤，可以方便地從服務(wù)器上打開這個(gè) index.html 了
1、安裝指令：cnpm install -g webpack-dev-server@1.15.0
2、注意：默認(rèn)訪問是 index.html 頁面
3藏姐、執(zhí)行命令：webpack-dev-server --open隆箩，然后它會(huì)自動(dòng)跳轉(zhuǎn)到：
http://localhost:8080/webpack-dev-server/
4、完畢羔杨，會(huì)顯示html頁面內(nèi)容
圖片.png
webpack-dev-server（npm）
1捌臊、先打包
2、運(yùn)行命令查看json文件：npm init -y
3兜材、修改json文件理澎，加入內(nèi)容：
"scripts": {
"dev": "webpack-dev-server --open"
}
4、運(yùn)行看效果：npm run dev
5曙寡、訪問頁面：http://localhost:8080/
圖片.png
