現(xiàn)狀：前端開發(fā)是基于多語言、多層次的編碼和組織工作罕模，前端產(chǎn)品的交付是基于瀏覽器，這些資源是通過增量加載的方式運(yùn)行到瀏覽器端。
webpack 的特點(diǎn)
代碼拆分
Webpack 有兩種組織模塊依賴的方式墓懂，同步和異步。異步依賴作為分割點(diǎn)霉囚，形成一個(gè)新的塊捕仔。在優(yōu)化了依賴樹后，每一個(gè)異步區(qū)塊都作為一個(gè)文件被打包盈罐。
Loader
Webpack 本身只能處理原生的 JavaScript 模塊榜跌，但是 loader 轉(zhuǎn)換器可以將各種類型的資源轉(zhuǎn)換成 JavaScript 模塊。這樣盅粪，任何資源都可以成為 Webpack 可以處理的模塊钓葫。
智能解析
Webpack 有一個(gè)智能解析器，幾乎可以處理任何第三方庫票顾，無論它們的模塊形式是 CommonJS础浮、 AMD 還是普通的 JS 文件。甚至在加載依賴的時(shí)候奠骄，允許使用動(dòng)態(tài)表達(dá)式 require("./templates/" + name + ".jade")豆同。
插件系統(tǒng)
Webpack 還有一個(gè)功能豐富的插件系統(tǒng)。大多數(shù)內(nèi)容功能都是基于這個(gè)插件系統(tǒng)運(yùn)行的含鳞，還可以開發(fā)和使用開源的 Webpack 插件影锈，來滿足各式各樣的需求。
快速運(yùn)行
Webpack 使用異步 I/O 和多級(jí)緩存提高運(yùn)行效率，這使得 Webpack 能夠以令人難以置信的速度快速增量編譯鸭廷。
Webpack 會(huì)分析入口文件枣抱，解析包含依賴關(guān)系的各個(gè)文件。這些文件（模塊）都打包到 bundle.js 辆床。Webpack 會(huì)給每個(gè)模塊分配一個(gè)唯一的 id 并通過這個(gè) id 索引和訪問模塊沃但。模塊會(huì)在運(yùn)行 require 的時(shí)候再執(zhí)行。
Loader
Webpack 本身只能處理 JavaScript 模塊佛吓，如果要處理其他類型的文件宵晚，就需要使用 loader 進(jìn)行轉(zhuǎn)換。loader 本身是一個(gè)函數(shù)维雇，接受源文件作為參數(shù)淤刃，返回轉(zhuǎn)換的結(jié)果。
Loader 可以在 require() 引用模塊的時(shí)候添加吱型，也可以在 webpack 全局配置中進(jìn)行綁定逸贾，還可以通過命令行的方式使用。
引入一個(gè) CSS 文件 style.css津滞，首頁將 style.css 也看成是一個(gè)模塊铝侵，然后用 css-loader 來讀取它，再用 style-loader 把它插入到頁面中触徐。
在entry.js文件中引入：
require("!style-loader!css-loader!./style.css") // 載入 style.css
// 感嘆號(hào)用來連接不同的loader咪鲜， 而且執(zhí)行順序是從右到左
安裝 loader：
npm install css-loader style-loader
刷新頁面，就ok了撞鹉。
我們也可以將 entry.js 文件中的 require("!style!css!./style.css") 修改為 require("./style.css") 疟丙，然后執(zhí)行：
$ webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'
配置文件
我們可以通過配置文件的方式代替命令行的執(zhí)行。
創(chuàng)建 package.json 來添加 webpack 需要的依賴：
{
"name": "webpack-example",
"version": "1.0.0",
"description": "A simple webpack example.",
"main": "bundle.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"webpack"
],
"author": "zhaoda",
"license": "MIT",
"devDependencies": {
"css-loader": "^0.21.0",
"style-loader": "^0.13.0",
"webpack": "^1.12.2"
}
}
運(yùn)行npm install
創(chuàng)建一個(gè)配置文件 webpack.config.js：
var webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style-loader!css-loader'}
]
}
}
最后運(yùn)行 webpack 就ok了鸟雏。
添加插件
插件可以完成更多 loader 不能完成的功能享郊，一般是在 webpack 的配置信息 plugins 選項(xiàng)中指定。
var webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style-loader!css-loader'}
]
},
plugins: [
new webpack.BannerPlugin('This file is created by zhaoda')
]
}
開發(fā)環(huán)境
webpack 編譯時(shí)孝鹊，通過參數(shù)讓編譯的輸出內(nèi)容帶有進(jìn)度和顏色炊琉。
$ webpack --progress --colors
啟動(dòng)監(jiān)聽模式，沒有變化的模塊會(huì)在編譯后緩存到內(nèi)存中又活，而不會(huì)每次都被重新編譯苔咪，整體速度是很快。
$ webpack --progress --colors --watch
使用
webpack-dev-server 開發(fā)服務(wù)是一個(gè)更好的選擇皇钞。它將在 localhost:8080 啟動(dòng)一個(gè) express 靜態(tài)資源 web 服務(wù)器悼泌，并且會(huì)以監(jiān)聽模式自動(dòng)運(yùn)行 webpack松捉，在瀏覽器打開 http://localhost:8080/或 http://localhost:8080/webpack-dev-server/可以瀏覽項(xiàng)目中的頁面和編譯后的資源輸出夹界，并且通過一個(gè) socket.io 服務(wù)實(shí)時(shí)監(jiān)聽它們的變化并自動(dòng)刷新頁面。
// 安裝
$ npm install webpack-dev-server -g
// 運(yùn)行
$ webpack-dev-server --progress --colors
