“工欲善其事必先利其器”，要想學習vue，首先需要我們去了解webpack，便於後期快速構建運行項目。廢話不多說，下面開始介紹在開始一個vue項目前我們需要對webpack有一定的了解——webpack敲門篇。

第一步：安裝Node.js

　　下載地址：http://nodejs.cn/download/

　　安裝就是傻瓜式的，一直下一步就可以。安裝完畢後可以通過cmd輸入npm -v查看是否安裝成功。//node a.js 可以運行a.js

　　npm（node package manage of JavaScript）作用：Node.js下載後自帶npm，類似於迅雷，可以下載項目所需的依賴模塊/包。

　　允許用戶從NPM服務器下載別人編寫的第三方包到本地使用。

• 允許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。

• 允許用戶將自己編寫的包或命令行程序上傳到NPM服務器供別人使用。

　　註：npm是國外的，可能會比較慢，建議安裝cnpm，安裝方法：npm install -g cnpm --registry=https://registry.npm.taobao.org

第二步：npm init初始化生成package.json

　　首先建立一個項目文件夾，進入文件夾，shift+右擊，出現【在此處打開命令窗口(W)】，點擊進入cmd控制臺，目錄即為當前文件夾目錄。然後輸入npm init，回車，會出現一些項目有關參數，可一路回車，完成後創建一個package.json。

　　package.json用來存放整個項目的依賴模塊/包，當我們把整個項目遷移到別的地方使用時，項目運行時會根據package.json的依賴參數自動下載所需模塊/包。

第三步：安裝webpack

　　命令：npm install webpack --save-dev

　　測試webpack在本地是否可用，webpack -v 如果出現webpack為無效命令，則使用全局安裝webpack：npm install webpack -g --save-dev

　　WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其轉換和打包為合適的格式供瀏覽器使用。

　　Grunt和Gulp的工作方式是：在一個配置文件中，指明對某些文件進行類似編譯，組合，壓縮等任務的具體步驟，工具之後可以自動替你完成這些任務。

第四步：利用webpack打包模塊並運行

　　webpack可以解析es6，但註意require請求同級目錄文件時（./）也要寫，代表同級目錄。（../）代表上級目錄。

　　如果需要把css打包到js文件中，需要安裝css加載器，安裝命令：npm install --save-dev style-loader css-loader.

　　（不推薦）手動打包並運行：

# {extry file}出填寫默認入口文件index.js的路徑
# {destination for bundled file}處填寫打包文件的目標存放路徑,運行後會自動創建一個bundle.js/build.js
# 填寫路徑的時候不用添加{}
webpack {entry file} {destination for bundled file} //如webpack ./js/index.js ./dist/bundle.js

　　在js文件中引入css文件語法：require(‘style-loader!css-loader!../css/index.css‘);註意順序不能錯！

　　（推薦）自動打包並運行：

　　需要在項目的根目錄創建webpack.config.js.項目裏配置如下：

module.exports = {
    entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
    output: {
        path: __dirname + "/public",//打包後的文件存放的地方
        filename: "bundle.js"//打包後輸出文件的文件名
    },
　　 //配置css加載器的方法試了很多，就這個可以用（rules代替了loaders）.
    //配置好以後：require(‘style-loader!css-loader!../css/index.css‘)就可以寫成require(‘../css/index.css‘);
　　 module: {  
       rules: [
          {
             test: /\.css$/,
             use: [
                { loader: "style-loader" },
                { loader: "css-loader" }
             ]
         }
      ]
   }
}

　　註：若提示output下path提示不是絕對路徑，試著去掉path，finename帶上相對路徑，即：

output: {
        path: ‘./dist/js/‘, // 打包後所放的路徑
        filename: ‘bundle.js‘// 打包之後的文件名
}

　　改成：

output: {
        filename: ‘./dist/js/bundle.js‘ // 打包之後的文件名
}

第五步：搭建webpack服務器進行熱加載自動刷新

　　寫到這裏，使用webpack一個單詞就可以打包運行我們的項目了，但接下來...webpack最牛逼的地方來了——webpack可以像php/java/.net...一樣搭建為我們搭建一個服務器，這樣就可以熱更新項目代碼，實現實時運行項目，進而方便我們調試項目。

　　1、安裝： npm install webpack-dev-server -g

　　2、寫入到依賴： npm install webpack-dev-server --save-dev

　 3、第三步：修改webpack配置文件中的output：

output:{
            path:"/", //註意這裏的改變，必須是根目錄,指定目錄無效，因為webpack會在內存中根目錄下生成下面文件名。
            filename:"bundle.js"
}

　　4、修改index.html

<script type="text/javascript" src="bundle.js"></script>

　　5、運行命令 實現自動刷新： webpack-dev-server --hot --inline

　 6、輸入localhost:8080/運行...

　　　 說明：webpack-dev-server的默認端口是8080

　　講到這裏，算是敲了一下webpack的門，可能還不算事入門，webpack的配置還有很多，詳情學習還是需要花很多時間的。但畢竟webpack是工具，學好如何在相應的項目中運用才是最主要的。這裏只是簡單介紹了如何利用webpack打包文件、如何搭建服務器進行熱更新。

　　下一篇：如何利用webpack搭建vue的利器——vue-cli（vue腳手架）！

vue學習前奏——webpack