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

說到自動(dòng)化構(gòu)建，你想到了什么？基于AMD的requirejs？還是基于commoJS的browserify？他們都在各自的領(lǐng)域或者說時(shí)代發(fā)揮了很重要的作用。
但是時(shí)代的變遷，webpack成了現(xiàn)在的佼佼者，我們不知道什么時(shí)候wepback也會被取代，但是現(xiàn)在我們必須要掌握。
我不擔(dān)心我學(xué)完webpack新東西來了就沒用了，相反的我很期待也很高興有新的東西來取代webpack，因?yàn)槿绻苋〈?，必然是更好的東西。如果是更好的，那又為什么要拒絕呢？活在當(dāng)下，認(rèn)真學(xué)習(xí)。

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

很老的產(chǎn)物了，它興起的時(shí)候web模塊化的標(biāo)準(zhǔn)都還沒有完善。那個(gè)時(shí)候出了一款基于AMD的打包工具，
不得不說對前端的發(fā)展起到了至關(guān)重要的作用，如果它可以功成身退了。

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

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

IDEA、webstrom、sublime、atom 都是很不錯(cuò)的編輯工具，idea大而全，webstrom是idea的簡化版、sublime輕量但不失穩(wěn)重、atom新興但不失典雅，東西不分上下，重在自己喜歡。找一個(gè)自己順手的就好，順便一提，我現(xiàn)在主要使用IDEA、輔助atom。因?yàn)槲沂且粋€(gè)java黨啊，少不了IDEA，atom的界面是我最喜歡的。

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

配置webpack

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

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

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

touch style.css

  body{
    background-color:pink;
  }

touch index.html
寫下以下內(nèi)容

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

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

touch style.css

  body{
    background-color:pink;
  }

touch index.html
寫下以下內(nèi)容

那就是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需要的東西，它是一個(gè)數(shù)組，意味著它可以定義多個(gè)
一個(gè)對象就是一個(gè)loader，test用正則匹配文件后綴
loaders指定采用哪個(gè)loader,注意它是從右往左執(zhí)行，所以這里先執(zhí)行css-loader
css-loader處理css的一些url，包括相對的絕對的之類的東西
style-loader 是將css文件采用js動(dòng)態(tài)寫入html頁面
c.使用css
打開index.js (因?yàn)槲覀冞@里沒有用babel,所以就用es5來寫)
require("./style.css");

我們現(xiàn)在可以使用webpack-dev-server這個(gè)東西了
如果你己經(jīng)全局安裝了(cnpm install -g webpack-dev-server),直接命令webpack-dev-server就可以開起來了，當(dāng)然你也可以在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來開啟服務(wù)器

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

> [email protected] 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

   > [email protected] 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兩個(gè)文件

會展示一下5個(gè)文件的內(nèi)容

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