最近公司要求用vue重構(gòu)項(xiàng)目，還涉及到模塊化開發(fā)，于是乎，我專門花了幾天的時(shí)間研究了一下webpack這個(gè)目前來看比較熱門的模塊加載兼打包工具，發(fā)現(xiàn)上手并不是很容易，現(xiàn)將總結(jié)的一些有關(guān)配置的心得分享出來，歡迎大神來拍磚。。。

一、新建一個(gè)項(xiàng)目目錄，cd /d 定位進(jìn)去，然后輸入npm init，會(huì)提示你填寫一些項(xiàng)目的信息，一直回車默認(rèn)就好了，或者直接執(zhí)行npm init -y 直接跳過，這樣就在項(xiàng)目目錄下生成了一個(gè)package.json文件。

二、接下來就是通過npm安裝項(xiàng)目依賴項(xiàng)，命令行輸入：npm install babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime vue-loader vue-html-loader vue-hot-reload-api css-loader style-loader webpack webpack-dev-server --save-dev ，繼續(xù)輸入npm install vue@^1.0.26 --save 。

這里注意的幾個(gè)點(diǎn)如下：

1.需要安裝的依賴項(xiàng)視具體的項(xiàng)目需求來定，我只是安了幾個(gè)必需的，后期會(huì)再加；

2.輸入之后如果一直報(bào)錯(cuò)或者光標(biāo)一直在轉(zhuǎn)動(dòng)，要么是npm版本太低(需要3+)，要么將npm改成cnpm，如果沒有安裝淘寶NPM鏡像，可以先輸入npm install -g cnpm --registry=https://registry.npm.taobao.org，接著輸入cnpm -v查看是否安裝完成，然后就可以使用cnpm來代替npm；

3.可以先修改package.json文件中的devDependencies和dependencies，然后再輸入npm install進(jìn)行一次性安裝（偷懶的做法，嘿嘿）；

4.dependencies中的vue默認(rèn)安裝2+，如果dependencies中的vue選擇^1.0.26，那么devDependencies中對(duì)應(yīng)的vue-loader最好選擇^7.3.0，vue-hot-reload-api最好選擇^1.2.0，否則就會(huì)報(bào)錯(cuò)；

5.dependencies中的vue-router默認(rèn)安裝2+，無(wú)法識(shí)別router.map()這個(gè)方法，如果想要用回這個(gè)方法，最好選擇^0.7.13；

6.有時(shí)安裝一個(gè)依賴項(xiàng)，會(huì)提示還需要一并安裝別的依賴項(xiàng)，例如：如果要安裝bootstrap-loader，會(huì)提示要求安裝node-sass sass-loader resolve-url-loader；要安裝less-loader，會(huì)提示要求安裝less；

完成這一步之后，會(huì)