一，放棄webpack

開始入手可能會覺得很亂，東西太多，就是一鍋大雜燴，當然也有很多前端大神會覺得這工具用起來很簡單方便。如果之前有用過 browsersync ,gulp等工具，甚至覺得這只是個重復的輪子，完全沒有必要啊，我之前的工具用得好好的，干嘛要學它呢？好吧，之前做組裝一張桌子需要準備錘子，多種規格的釘子，多種規格的螺絲刀，多種規格的螺絲和螺帽，鉆孔器等等，但是你都覺得很簡單，因為你都知道這些工具放在那些地方，很容易你就找到了，現在給你一個工具箱，里面什么都準備好了，可能反而覺得不習慣，有些工具你都沒有用過，看上去用起來挺費力的。

二，webpack準備工作（windows平臺）

不要再猶豫了，開始上手webpack這個工具箱吧，里面的工具用起來可沒有你想象的難哦。

（1）安裝nodejs：
到node中文網（http://nodejs.cn/），直接下載最新版本一路點過去就可以了

（2）安裝cnpm：
nodejs安裝完是已經帶來npm的，但是國內的網絡環境你懂的，為了不出故障安裝cnpm吧。打開控制臺（WIN+R : 輸入cmd，回車），控制臺輸入“npm install cnpm -g” 回車

（3）全局安裝webpack：
依然控制臺 “cnpm install webpack -g” 回車

到此，全局準備工作完成

三，開始使用webpack

（1）建立一個webpack工程和index.html,里面創建<script src="entry.js"></script>標簽。將webapck安裝到項目依賴，控制臺輸入 “npm install webpack --save-dev”回車。待下載完成后，如圖3-1，項目中會多出node_modules文件夾和package.json，暫時不用關心 package.json 里的內容是什么。

webpack-test

3-1

（2）新建index.js ，內容如圖 3-2，

3-2

（3）控制臺執行" webpack index.js entry.js "，會將 index.js 打包到入口文件 entry.js 如圖3-3,在瀏覽器中查看 如圖 3-4，至此，你已經上手webpack基本操作了

3-3

3-4

（4）看到這里，或許一頭霧水，但是，你只要按照 （1）～（3），然后看到頁面上出現簡單的 <h1>webpack</h1> ,就證明你已經動手做成功了，但是這里會了些什么，感覺什么也不會啊，亟需總結一下，要不前面的就白做了，看官來吧！開始總結了：

1，首先，你全局安裝了webpack?

2，你又新建了一個web工程，里面只有一個 index.html 和 index.js文件,index.html里面就只引入了一個js文件<script src="entry.js"></script>，index.js里面就一條語句 document.write("<h1>webpack</h1>");

3，你局部安裝了webpack項目依賴，記住控制臺命令：npm install webpack --save-dev

4，然后你想到，現在有了兩個文件是你自己創建的，一個index.js,一個index.html，但是index.html中沒有引入index.js而是引入的entry.js，當你在瀏覽器中打開index.html只會得到一片空白，所以需要一個entry.js文件幫助你走一條彎路，把index.js中的代碼打包放到entry.js中你的index.html才能享用到index.js中的代碼，那webpack就幫你連通了這條彎路，記住控制臺命令 webpack index.js entry.js，它的意思就是把 index.js 打包到 entry.js中。最后你運行index.html，沒有任何驚喜的發現“咦！index.js的代碼果然到了entry.js上面”,但是這條彎路有什么用呢？

三，webpack做甚

先不管上面那條彎路做甚的問題，重新來制造個新問題，上面只有index.js文件是你自己寫的js文件，entry.js是webpack生成的，那么我有很多很多的js文件，我要實現很多很多的功能，怎么辦了？這里解釋下，我們index.js看做一個入口，是index.html訪問所有你自己寫的js文件的入口，但是這個入口不能夠直接訪問，需要加工后才能訪問，我們把index.js加工成 entry.js ，這樣子index.html就可以通過entry.js訪問到所有關聯到的js文件，這里說到關聯，又是一個問題，什么是關聯？為什么會有關聯？一個一個功能模塊之間有相互關系就叫關聯，A功能模塊要用到B功能模塊的功能就需要A功能模塊關聯B功能模塊，先不管什么AMD，CMD規范，閱讀此文不需要那么多專業名字。動手做就行了，又開始動手了。

（1）新建兩個js文件，dog.js和cat.js，里面的內容見圖4-1和4-2

4-1

4-2

（2），修改index.js這個路口文件，內容見圖4-3

4-3

（3）控制臺“ webpack index.js entry.js ” 然后到瀏覽器中看index.html的效果，見圖4-4,發現dog.js和cat.js包括index.js中的代碼全部打包到entry.js中了，index.html中具備了index.js、cat.js、dog.js的全部代碼功能

4-4

（4）開始答疑了：

看到圖4-3中，index.js中填加了兩行代碼
require("./dog.js"); ? //把dog.js引入到此文件
require("./cat.js"); ? //把cat.js引入到此文件