現(xiàn)狀：前端開發(fā)是基于多語言、多層次的編碼和組織工作，前端產(chǎn)品的交付是基于瀏覽器，這些資源是通過增量加載的方式運行到瀏覽器端。

webpack 的特點

代碼拆分

Webpack 有兩種組織模塊依賴的方式，同步和異步。異步依賴作為分割點，形成一個新的塊。在優(yōu)化了依賴樹后，每一個異步區(qū)塊都作為一個文件被打包。

Loader

Webpack 本身只能處理原生的 JavaScript 模塊，但是 loader 轉(zhuǎn)換器可以將各種類型的資源轉(zhuǎn)換成 JavaScript 模塊。這樣，任何資源都可以成為 Webpack 可以處理的模塊。

智能解析

Webpack 有一個智能解析器，幾乎可以處理任何第三方庫，無論它們的模塊形式是 CommonJS、 AMD 還是普通的 JS 文件。甚至在加載依賴的時候，允許使用動態(tài)表達式 require("./templates/" + name + ".jade")。

插件系統(tǒng)

Webpack 還有一個功能豐富的插件系統(tǒng)。大多數(shù)內(nèi)容功能都是基于這個插件系統(tǒng)運行的，還可以開發(fā)和使用開源的 Webpack 插件，來滿足各式各樣的需求。

快速運行

Webpack 使用異步 I/O 和多級緩存提高運行效率，這使得 Webpack 能夠以令人難以置信的速度快速增量編譯。

Webpack 會分析入口文件，解析包含依賴關(guān)系的各個文件。這些文件（模塊）都打包到 bundle.js 。Webpack 會給每個模塊分配一個唯一的 id 并通過這個 id 索引和訪問模塊。模塊會在運行 require 的時候再執(zhí)行。

Loader

Webpack 本身只能處理 JavaScript 模塊，如果要處理其他類型的文件，就需要使用 loader 進行轉(zhuǎn)換。loader 本身是一個函數(shù)，接受源文件作為參數(shù)，返回轉(zhuǎn)換的結(jié)果。

Loader 可以在 require() 引用模塊的時候添加，也可以在 webpack 全局配置中進行綁定，還可以通過命令行的方式使用。

引入一個 CSS 文件 style.css，首頁將 style.css 也看成是一個模塊，然后用 css-loader 來讀取它，再用 style-loader 把它插入到頁面中。

在entry.js文件中引入：

require("!style-loader!css-loader!./style.css") // 載入 style.css
// 感嘆號用來連接不同的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"
  }
}

運行npm install
創(chuàng)建一個配置文件 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'}
    ]
  }
}

最后運行 webpack 就ok了。

添加插件

插件可以完成更多 loader 不能完成的功能，一般是在 webpack 的配置信息 plugins 選項中指定。

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ù)讓編譯的輸出內(nèi)容帶有進度和顏色。

$ webpack --progress --colors

啟動監(jiān)聽模式，沒有變化的模塊會在編譯后緩存到內(nèi)存中，而不會每次都被重新編譯，整體速度是很快。

$ webpack --progress --colors --watch

使用
webpack-dev-server 開發(fā)服務是一個更好的選擇。它將在 localhost:8080 啟動一個 express 靜態(tài)資源 web 服務器，并且會以監(jiān)聽模式自動運行 webpack，在瀏覽器打開 http://localhost:8080/或 http://localhost:8080/webpack-dev-server/可以瀏覽項目中的頁面和編譯后的資源輸出，并且通過一個 socket.io 服務實時監(jiān)聽它們的變化并自動刷新頁面。

// 安裝
$ npm install webpack-dev-server -g
// 運行
$ webpack-dev-server --progress --colors