1. 準備工作
(1). 下載nodeJS nodeJS官網
(2). 下載Git Git官網
注：下載完Node.js后根據安裝提示一步步安裝即可，node.js有一個叫npm的包管理器，webpack模塊可被npm包管理器安裝
安裝webpack
$npm install -g webpack //全局安裝webpack命令
2. 在項目中使用webpack
$npm init //使用此命令在項目根目錄下生成package.json文件
注： 安裝時后綴 --save 和 --save-dev區別
- --save會把依賴包名稱添加到package.json文件dependencies鍵（運行時依賴，即我們發布后還需要依賴的模塊，否則運行不了，如jquery、angular等）下;
- --save-dev是添加到package.json文件devDependencies鍵（開發時依賴，即發布后用不到的模塊）下；
3. 安裝webpack到項目中
$npm install --save-dev webpack //將webpack加入到pageage.json配置文件中
注：此時webpack依賴模塊已經配置到我們項目中了，并且項目目錄中新增一個node_modules文件夾，打開文件夾可看到剛安裝的webpack模塊。
4. 開發工具
webpack-dev-server模塊能快速配置一個本地服務器，并且當每次保存修改過的代碼后，測試服務器將立即自動刷新頁面，省去了每次都要手動打包編譯代碼和刷新頁面的麻煩。
5.配置webpack.config.js文件
使用命令行配置
$ webpack //當在命令行輸入webpack時，默認使用webpack.config.js文件配置可自定義webpack配置文件，寫法如下
$webpack --config webpack.config_test.js
//--config選項告訴webpack使用webpack.config_test.js作為配置文件配置文件結構
module.exports = {
//這里填寫配置項
}
//從以上代碼可看出，webpack.config.js文件輸出了配置對象使用node.js API配置 (需通過參數來傳遞配置對象)
webpack({
//配置項在這里填寫
}, function(){
//回調函數
})更復雜的配置項
$webpack app.js app.bundle.js //將app.js編譯成app.bundle.js文件
注：使用命令行缺點是我們每次要編譯編寫代碼時，都要寫這么長的命令，如果設置妥當的webpack.config.js配置文件，則webpack可以監聽文件改變，自動的執行編譯打包命令
$webpack -w //監聽文件改變，自動編譯
-
配置文件怎么寫？
webpack.config.js案例
(1). context——上下文選項用來決定根目錄（即絕對路徑）的入口文件
(2). entry——打包文件的入口點（3種方式）
//1).字符串，此字符串將在開始編譯時被加載
entry: "./app.js"
//2).數組，此數組中所有模塊在編譯啟動時都將被加載，對后一個數組元素將被輸出
entry: ["./entry1.js", "./entry2.js"]
//3).對象，相當創建了多個入口綁定
對象的"鍵"名可在output中使用name獲取到，"值"可以是一個字符串也可以是一個數組
{
entry:{
page1: "./page1.js",
page2: ["./entry1.js","./entry2.js"]
},
output:{
filename: "[name].bundle.js",
chunkFilename: "[id].bundle.js"
}
}
(3).output——告訴webpack如何編譯文件到硬盤中
注：雖然entry中可以使用一個對象傳入多個入口點文件，但是只能給output設置一個配置項
output.path：告訴webpack要把編譯后的文件輸出到硬盤的什么位置上，而filename被用來確保輸在這個目錄中的文件是獨一無二的
output.publicPath：用來指定輸出文件的公共Url地址，當我們在瀏覽器瀏覽時需配置它
以上是webpack最長用的配置項，下面是更高級的配置，比如使用ES6（ES2015）語法需配置babel-loader，在js中引入css樣式文件如style-loader、css-loader等，開發React應用需配置react加載器等等。
下載Loaders加載器
下面是開發基于react的webapp時需配置的項。
首先用npm下載這些模塊
//下載babel-loader模塊
$ npm install --save-dev babel-loader
//下載babel-preset-es2015，這樣確保babel能解析ES6的最新特性
$ npm install --save-dev babel-preset-es2015
//下載react模塊
$ npm install -save-dev react
//下載babel-preset-react，babel才能解析react的語法特性
$ npm install --save-dev babel-preset-react
Babel是一個轉換編譯器，它能將ES6轉換成可在瀏覽器中運行的代碼。Babel是所有ES6轉換編譯器中與ES6規范兼容度最高的，甚至超過了谷歌創建已久的Traceur編譯器。Babel允許開發者使用ES6所有新特性，而且不會影響與老版本瀏覽器的兼容性。此外，它還支持許多不同的構建測試系統，使開發者很容易將它集成到自己的工具鏈中。
在webpack.config.js中配置加載器loaders
module: {
loaders: [
{
test: /\.jsx$/,
loader: 'babel-loader',
query:{
presets:['es2015','react']
}
}
]
}