註： ** 先來說下前端為什麼需要學習webpack吧！** 因為現在SPA流行，javascript的依賴包，less,scss.sass樣式文件的編譯。 更重要的是前端現在三大主流Vue.js 、React.js和AngluarJs都和webpack緊緊相連了。 說實話，現在不會一點webpac ...
註：
** 先來說下前端為什麼需要學習webpack吧！**
因為現在SPA流行，javascript的依賴包，less,scss.sass樣式文件的編譯。
更重要的是前端現在三大主流Vue.js 、React.js和AngluarJs都和webpack緊緊相連了。
說實話，現在不會一點webpack，那和三大框架還是有點距離了。
webopack 到底是什麼？
簡單來說，就是一個模塊打包機。
安裝webpackji
安裝webpack 首先你先要安裝nodejs,這裡我就不多做解釋了，直接去nodejs 官網下載安裝包，傻瓜式安裝就可以了。
nodejs自帶包管理工具=》npm
現在Ctrl = R 打開cmd命令工具，
$ npm -v
查看 npm 版本然後在輸入下麵指令，全局安裝webpack
$ npm install -g webpack
npm下載國外的包會很慢很慢
解決辦法： 使用淘寶鏡像。
你可以使用我們定製的 cnpm (gzip 壓縮支持) 命令行工具代替預設的 npm:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
速度就上去了，或者你也可以用yarn。
官網不推薦全局安裝webpack。
直接上手一個DEMO，讓你先爽一把。
創建文件夾： webpack_demo
$ cd webpack_demo
切換到路徑到webpack_demo。
然後在文件夾下麵創建兩個子文件夾 src 和 dist，
src: 生產環境存放；
dist: 生產環境存放的（webpack打包後存放文件的）
然後再在dist文件夾下麵創建index.html文件，裡面追下麵內容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack</title>
</head>
<body>
<div id="title"></div>
<script src="./main.js"></script>
</body>
</html>
然後再在src文件夾下麵創建entrance.js文件，入口文件。
在其追加：
document.querySelector('#title').innerHTML = 'hello webpack！'
需要編譯的文件都弄好了。
在項目需要使用npm之前，先初始化項目，生成 package.json。
$ npm init
沒有什麼特別要求的就一直回車就可以了，
現在在webpack_demo項目內安裝webpack。
$ npm install webpack --save
這樣在項目內部就安裝了webpack。
$ webpack -v
運行上面命令就可以查看安裝的webpack版本了
運行下麵命令進行打包
$ webpack src/entrance.js
- {entery file}:入口文件的路徑，本文中就是src/entrance.js的路徑；
- {destination for bundled file}:填寫打包後存放的路徑。這個參數可以不填，會自動在dist下麵生成main.js
- 註意：在命令行中是不需要寫{ }的。
運行完上面的命令，你會發現項目已經打包好了。你直接打開dist的html 就可以看到：
是不是覺得很爽，後面我會繼續為大家更新完成的，關註我可以及時關註更新！
