一：安裝
1.如果你安裝了node.js，那么打開命令行：
npm install webpack -g
2.如果你沒有安裝node.js，那么：
(1).打開node.js官網(wǎng)，下載node.js并安裝
(2).重復第一種if（此處你以為會給出第二種安裝方式么，并不！）
二：配置
好了，不出意外應該裝好了webpack（一臺機器已經(jīng)造成），那么接下來就是配置了（我們需要給這個機器一些指令和參數(shù)，讓它知道它應該干什么）。如果你曾經(jīng)使用過grunt或者gulp,那么你對gulpfile.js/Gruntfile.js一定不陌生，對，webpack也有一個自己的配置文件 webpack.config.js，如果你沒用過grunt或者gulp也沒關系，這不是重點，重點是接下來的配置：
先上我自己項目的配置：
項目目錄下的webpack.config.js:
一個項目所需要的基本配置都有了，其他一些功能根據(jù)項目需要而定。好了，從上往下開始介紹：
1.entry:webpack打包項目的入口文件，它告訴webpack需要從哪里開始著手打包工作，它的值分別是字符串、數(shù)組和對象
（1）絕大多數(shù)的web app，你的應用只有一個單一的入口，enter項的值你可以使用任意類型，最終輸出的結(jié)果都是一樣的。（以下配置都會打包成app.js）
（2）如果你想添加多個彼此不互相依賴的文件，你可以使用數(shù)組格式的值。（如下示例會以index.js為入口文件，打包后生成bundle.js，再將jquery.js文件添加到bundle.js后面）
（3）如果你需要將不同的文件打包生成不同的bundle(例如你的項目有多個html,每個html需要用到的js各不相同，需要分開打包),那么就需要用到對象類的入口配置：
這樣webpack就會有3個入口文件，vendor1,vendor2和app,并打包生成vendor1.js，vendor2.js和app.js3個文件（譯注1：生成的文件名由下面的output.filename的值決定，此處是"[name].js"，[name]是entry對象內(nèi)的key），然后你可以在你的html文件引入你需要的那個打包生成的js文件（本例子采用的就是這種對象配置，但是并不是因為項目有多個html頁面，僅僅是為了分開打包，加快打包效率，vendor1是react項目全家桶，vendor2是項目中用到的一些外部插件，app是項目js代碼）
2.output:
output項告訴webpack怎樣存儲輸出結(jié)果以及存儲到哪里。
path:打包生成的文件位置（本例子會在當前目錄下生成一個build文件夾，build文件夾內(nèi)生成js文件夾，js文件夾呢內(nèi)生成對應的js文件，注意：這里的path并不是html引用js的目錄，僅僅是作為webpack編譯的目錄，例如你需要發(fā)布版本的時候，用webpack打包項目，此時path就作為webpack打包項目后的目錄，項目打包生成的文件都在這個目錄下）
filename：生成的文件名（[name]參照譯注1）
publicPath:資源文件訪問地址（主要是生產(chǎn)環(huán)境下有用，但是并不是說開發(fā)環(huán)境不需要這個，因為，你的html引用生成的js文件的路徑=publicPath+filename,本例子html中引用路徑如下）
3.module:在webpack中，一切皆可以看做模塊，html,css,js，圖片，包括其他文件。
loaders:這項配置告訴webpack，對于項目中不同的文件類型，應該怎樣處理它
<1> test：匹配文件類型
<2> include：告訴webpack此類文件的可處理目錄
<3> exclude：告訴webpack排除此目錄
<4> loader：告訴webpack，此類型的文件應該用什么處理器去處理它
<5> query：為上面的loader添加一些額外的選項，讓loader更清晰的按照我們的需求來進行工作
<6> presets：需要用到的套件，一般用的比較多的也就本例子中的2個。本例子中，loader會編譯es2015(即es6)語法為瀏覽器可識別的javascript，也會編譯react的jsx語法，這樣你的項目中就可以用es6和react了
<7> plugins：需要用到的插件，本例子中的插件適用于代碼中有用到object-assign()語法
當然，本例子中的babel-loader也可以按照如下配置：
在和webpack.congfig.js同級目錄下新建一個.babelrc文件，里面是babel-loader的配置選項，相當于上文當中的
像如下圖中的寫法是對url-loader的擴展的一種方式(本例子中會在處理圖片等資源的時候，如果圖片資源超過512kb，那么就轉(zhuǎn)換成dataurl格式的圖片)，可以按照項目的實際需求來選擇。
4.plugins:webpack的插件項，告訴webpack除了最基本的一些打包工作之外，還需要做些什么
常用的一些插件：
代碼熱替換, HotModuleReplacementPlugin
生成html文件，HtmlWebpackPlugin
將css成生文件，而非內(nèi)聯(lián)，ExtractTextPlugin
報錯但不退出webpack進程，NoErrorsPlugin
代碼壓縮，UglifyJsPlugin，建議在生產(chǎn)環(huán)境再開啟
多個 html共用一個js文件(chunk)，可用CommonsChunkPlugin
清理文件夾，Clean
調(diào)用模塊的別名ProvidePlugin，例如想在js中用$，如果通過webpack加載，需要將$與jQuery對應起來
現(xiàn)在基本上一個項目所需要的最基本的webpack配置都有了，如果你還沒有安裝webpack-dev-server，那么：
打開cmd > 定位到項目目錄下 > 輸入：npm install webpack-dev-server --save-dev > 等待安裝完成 > 輸入命令：webpack-dev-server，默認端口為8080，如果你想修改為其他端口的話（比如想改成8888），這樣：webpak-dev-server --port 8888。
好了，大概就這么多，其他的一些更豐富強大的功能可以參考webpack。
（注：本文是基于webpack 1.x，2.x版本略微有些不同，詳情參考上面鏈接地址）
