摘要：是一個和差不多同時代的產物，但是它只支持基于，對于來說只能興嘆了。找一個自己順手的就好，順便一提，我現在主要使用輔助。

說到自動化構建，你想到了什么？基于AMD的requirejs？還是基于commoJS的browserify？他們都在各自的領域或者說時代發揮了很重要的作用。
但是時代的變遷，webpack成了現在的佼佼者，我們不知道什么時候wepback也會被取代，但是現在我們必須要掌握。
我不擔心我學完webpack新東西來了就沒用了，相反的我很期待也很高興有新的東西來取代webpack，因為如果能取代，必然是更好的東西。如果是更好的，那又為什么要拒絕呢？活在當下，認真學習。

webpack和requirejs browserify一樣，都是一款打包工具，那為什么要選這個？我們進行一個對比

很老的產物了，它興起的時候web模塊化的標準都還沒有完善。那個時候出了一款基于AMD的打包工具，
不得不說對前端的發展起到了至關重要的作用，如果它可以功成身退了。

是一個和webpack差不多同時代的產物，但是它只支持基于commonJS，對于AMD來說只能興嘆了。
并且它只支持打包js,如果你對這兩個缺點不那么在意，那么就是它了。

支持AMD和commonJS,以模塊化為起點,我們不僅可以用它打包js，也可以打包css，
包括圖片。webpack把任何一個文件都看成一個模塊，因此你準備好要迎接模塊化的挑戰了嗎？

IDEA、webstrom、sublime、atom 都是很不錯的編輯工具，idea大而全，webstrom是idea的簡化版、sublime輕量但不失穩重、atom新興但不失典雅，東西不分上下，重在自己喜歡。找一個自己順手的就好，順便一提，我現在主要使用IDEA、輔助atom。因為我是一個java黨啊，少不了IDEA，atom的界面是我最喜歡的。

a.新建項目 mkdir webpack-study && cd webpack-study
b.初始化環境 npm init -y
c.安裝工具(如果你沒安裝taobao源，把cnpm換成npm) npm install --save-dev webpack webpack-dev-server
說明:webpack是核心文件、wepback-dev-server是類http-server的web啟動工具，建議安裝一下這個server
d.新建配置文件 (名字一定不能換) touch webpack.config.js

配置webpack

module. exports ={
  entry:"./index.js",
  output:{
    path:__dirname+"/dist",
    filename:"bundle.js"
  }
}

說明:
模塊化module.export
入口文件:entry 有幾個頁面就有幾個entry 如果是單頁面（spa)，一個entry就夠了
輸出 output,path是輸出路徑,__dirname是nodejs的全局變量，表示當前目錄, filename，打包后的文件名

vim index.js
document.write("Hello world");

touch style.css

  body{
    background-color:pink;
  }

touch index.html
寫下以下內容

說明:
模塊化module.export
入口文件:entry 有幾個頁面就有幾個entry 如果是單頁面（spa)，一個entry就夠了
輸出 output,path是輸出路徑,__dirname是nodejs的全局變量，表示當前目錄, filename，打包后的文件名

vim index.js document.write("Hello world");

touch style.css

  body{
    background-color:pink;
  }

touch index.html
寫下以下內容

那就是loaders，wepback的一大特色就是可以將一些瀏覽器不能原生支持的文件通過loaders編譯成瀏覽器可以支持的文件
a.安裝loaders
npm install style-loader css-loader
b.打開webpack.config.js
添加模塊

  module:{
    loaders:[
    {
      test:/.css$/,
      loaders:["style-loader","css-loader"]
      }
  ]

  }

說明：
模塊下定義大的loaders去loader需要的東西，它是一個數組，意味著它可以定義多個
一個對象就是一個loader，test用正則匹配文件后綴
loaders指定采用哪個loader,注意它是從右往左執行，所以這里先執行css-loader
css-loader處理css的一些url，包括相對的絕對的之類的東西
style-loader 是將css文件采用js動態寫入html頁面
c.使用css
打開index.js (因為我們這里沒有用babel,所以就用es5來寫)
require("./style.css");

我們現在可以使用webpack-dev-server這個東西了
如果你己經全局安裝了(cnpm install -g webpack-dev-server),直接命令webpack-dev-server就可以開起來了，當然你也可以在package.json文件里面添加script，文件如下

{
"name": "webpack-study",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start":"webpack-dev-server --progress",
"build":"webpack --progress",
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.23.1",
"style-loader": "^0.13.1",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1"
  }
}

這里我們就可以使用npm run build來編譯，使用npm run start來開啟服務器

?  webpack-study git:(master) ? npm run build

> webpack-study@1.0.0 build /Users/xiaomo/workspace/webpack-study
> webpack --progress
Hash: 11ffef2911f2436a3948
Version: webpack 1.13.0
Time: 64ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main
   [0] ./index.js 30 bytes {0} [built]
   ?  webpack-study git:(master) ? npm run start

   > webpack-study@1.0.0 start /Users/xiaomo/workspace/webpack-study
   > webpack-dev-server --progcess

   http://localhost:8080/webpack-dev-server/
   webpack result is served from /
   content is served from /Users/xiaomo/workspace/webpack-study
   Hash: 11ffef2911f2436a3948
   Version: webpack 1.13.0
   Time: 80ms
       Asset     Size  Chunks             Chunk Names
   bundle.js  1.42 kB       0  [emitted]  main
   chunk    {0} bundle.js (main) 30 bytes [rendered]
       [0] ./index.js 30 bytes {0} [built]
   webpack: bundle is now VALID.

b.然后訪問 http://locahost:8080 就可以看到效果了

webpack.config.ks、index.js、index.html、style.css、package.json，編譯好要使用的只有index.html和dist/bundle.js兩個文件

會展示一下5個文件的內容

如果覺得圖小可以點擊下面鏈接查看大圖
webpack的簡單使用