1. 準(zhǔn)備工作
(1). 下載nodeJS nodeJS官網(wǎng)
(2). 下載Git Git官網(wǎng)
注：下載完Node.js后根據(jù)安裝提示一步步安裝即可闲擦，node.js有一個叫npm的包管理器，webpack模塊可被npm包管理器安裝
安裝webpack
$npm install -g webpack //全局安裝webpack命令
2. 在項目中使用webpack
$npm init //使用此命令在項目根目錄下生成package.json文件
注： 安裝時后綴 --save 和 --save-dev區(qū)別
- --save會把依賴包名稱添加到package.json文件dependencies鍵（運(yùn)行時依賴昵济，即我們發(fā)布后還需要依賴的模塊截粗，否則運(yùn)行不了，如jquery适篙、angular等）下;
- --save-dev是添加到package.json文件devDependencies鍵（開發(fā)時依賴铁坎，即發(fā)布后用不到的模塊）下蜂奸；
3. 安裝webpack到項目中
$npm install --save-dev webpack //將webpack加入到pageage.json配置文件中
注：此時webpack依賴模塊已經(jīng)配置到我們項目中了，并且項目目錄中新增一個node_modules文件夾硬萍，打開文件夾可看到剛安裝的webpack模塊扩所。
4. 開發(fā)工具
webpack-dev-server模塊能快速配置一個本地服務(wù)器，并且當(dāng)每次保存修改過的代碼后朴乖，測試服務(wù)器將立即自動刷新頁面祖屏，省去了每次都要手動打包編譯代碼和刷新頁面的麻煩。
5.配置webpack.config.js文件
使用命令行配置
$ webpack //當(dāng)在命令行輸入webpack時买羞，默認(rèn)使用webpack.config.js文件配置可自定義webpack配置文件赐劣，寫法如下
$webpack --config webpack.config_test.js
//--config選項告訴webpack使用webpack.config_test.js作為配置文件配置文件結(jié)構(gòu)
module.exports = {
//這里填寫配置項
}
//從以上代碼可看出，webpack.config.js文件輸出了配置對象使用node.js API配置 (需通過參數(shù)來傳遞配置對象)
webpack({
//配置項在這里填寫
}, function(){
//回調(diào)函數(shù)
})更復(fù)雜的配置項
$webpack app.js app.bundle.js //將app.js編譯成app.bundle.js文件
注：使用命令行缺點是我們每次要編譯編寫代碼時哩都，都要寫這么長的命令魁兼，如果設(shè)置妥當(dāng)?shù)膚ebpack.config.js配置文件，則webpack可以監(jiān)聽文件改變漠嵌，自動的執(zhí)行編譯打包命令
$webpack -w //監(jiān)聽文件改變咐汞，自動編譯
-
配置文件怎么寫？
webpack.config.js案例
(1). context——上下文選項用來決定根目錄（即絕對路徑）的入口文件
(2). entry——打包文件的入口點（3種方式）
//1).字符串儒鹿，此字符串將在開始編譯時被加載
entry: "./app.js"
//2).數(shù)組化撕，此數(shù)組中所有模塊在編譯啟動時都將被加載，對后一個數(shù)組元素將被輸出
entry: ["./entry1.js", "./entry2.js"]
//3).對象约炎，相當(dāng)創(chuàng)建了多個入口綁定
對象的"鍵"名可在output中使用name獲取到植阴，"值"可以是一個字符串也可以是一個數(shù)組
{
entry:{
page1: "./page1.js",
page2: ["./entry1.js","./entry2.js"]
},
output:{
filename: "[name].bundle.js",
chunkFilename: "[id].bundle.js"
}
}
(3).output——告訴webpack如何編譯文件到硬盤中
注：雖然entry中可以使用一個對象傳入多個入口點文件，但是只能給output設(shè)置一個配置項
output.path：告訴webpack要把編譯后的文件輸出到硬盤的什么位置上圾浅，而filename被用來確保輸在這個目錄中的文件是獨一無二的
output.publicPath：用來指定輸出文件的公共Url地址掠手，當(dāng)我們在瀏覽器瀏覽時需配置它
以上是webpack最長用的配置項，下面是更高級的配置狸捕，比如使用ES6（ES2015）語法需配置babel-loader喷鸽，在js中引入css樣式文件如style-loader、css-loader等灸拍，開發(fā)React應(yīng)用需配置react加載器等等做祝。
下載Loaders加載器
下面是開發(fā)基于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是一個轉(zhuǎn)換編譯器，它能將ES6轉(zhuǎn)換成可在瀏覽器中運(yùn)行的代碼轩性。Babel是所有ES6轉(zhuǎn)換編譯器中與ES6規(guī)范兼容度最高的声登，甚至超過了谷歌創(chuàng)建已久的Traceur編譯器。Babel允許開發(fā)者使用ES6所有新特性，而且不會影響與老版本瀏覽器的兼容性捌刮。此外，它還支持許多不同的構(gòu)建測試系統(tǒng)舒岸，使開發(fā)者很容易將它集成到自己的工具鏈中绅作。
在webpack.config.js中配置加載器loaders
module: {
loaders: [
{
test: /\.jsx$/,
loader: 'babel-loader',
query:{
presets:['es2015','react']
}
}
]
}