一.介紹：
Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規則打包成符合生
產環境部署的前端資源。還可以將按需加載的模塊進行代碼分隔，等到實際需要的時候再異步加載。通過 loader 的轉
換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、
Coffeescript、 LESS等。
Webpack 是一個模塊打包器。它將根據模塊的依賴關系進行靜態分析，然后將這些模塊按照指定的規則生成對應的
靜態資源。
二.Webpack 和其他模塊化工具有什么區別呢？
1.代碼拆分：
2.Loader:
3.智能解析：
4.插件系統：
5.快速運行：
三.安裝使用：
1.用 cnpm 全局安裝 Webpack： cnpm install webpack -g
2.本地安裝使用：cnpm install webpack --save-dev
3.項目初始化：
（1）.建立mywebpack文件夾並初始化項目：C:\mywebpack>npm init
（2）.如果不是實際項目可以一路回車完成初始化，安裝本地webpack：C:\mywebpack>cnpm install webpack --save-dev 完成安裝。可以使用 C:\mywebpack>dnpm info webpack 查看webpack 的版
本；也可以看到package.json中例如：
"devDependencies": {
"webpack": "^1.14.0"
}
webpack安裝成功！
（3）.使用webpack:
首先創建一個靜態頁面 index.html 和一個 JS 入口文件 entry.js：
<!-- index.html --> <html> <head> <meta charset="utf-8"> </head> <body> <script src="bundle.js"></script> </body> </html> // entry.js document.write('It works.') 然后編譯 entry.js 並打包到 bundle.js: C:\mywebpack> webpack entry.js bundle.js
用瀏覽器打開 index.html 將會看到 It works.
接下來添加一個模塊 module.js 並修改入口 entry.js：
// module.js module.exports = 'It works from module.js.' // entry.js document.write('It works.') document.write(require('./module.js')) // 添加模塊 重新打包 webpack entry.js bundle.js 后刷新頁面看到變化 It works.It works from module.js.
（4）.Loader：Webpack 本身只能處理 JavaScript 模塊，如果要處理其他類型的文件，就需要使用 loader
進行轉換。
上一節的例子，我們要在頁面中引入一個 CSS 文件 style.css，首頁將 style.css 也看成是一個模塊，
然后用 css-loader 來讀取它，再用 style-loader 把它插入到頁面中
/* style.css */ body { background: yellow; } 修改 entry.js：
require("!style!css!./style.css") // 載入 style.css document.write('It works.') document.write(require('./module.js'))
安裝 loader：
C:\mywebpack>cnpm install css-loader style-loader
重新編譯打包，刷新頁面，就可以看到黃色的頁面背景了。
如果每次 require CSS 文件的時候都要寫 loader 前綴，是一件很繁瑣的事情。我們可以根據模塊類型（擴展名）來自動綁定需要的 loader。 將 entry.js 中的 require("!style!css!./style.css") 修改為 require("./style.css") ，然后執行：
$ webpack entry.js bundle.js --module-bind 'css=style!css' # 有些環境下可能需要使用雙引號 $ webpack entry.js bundle.js --module-bind "css=style!css" 顯然，這兩種使用 loader 的方式，效果是一樣的。
（5）.配置文件：繼續我們的案例，在根目錄創建 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": "", "license": "ISC", "devDependencies": { "css-loader": "^0.21.0", "style-loader": "^0.13.0", "webpack": "^1.12.2" } }運行C:\mywebpack>cnpm install
然后創建一個配置文件 webpack.config.js：
var webpack = require('webpack') module.exports = { entry: './entry.js', output: { path: __dirname, filename: 'bundle.js' }, module: { loaders: [ {test: /\.css$/, loader: 'style!css'} ] } } 同時簡化 entry.js 中的 style.css 加載方式：
require('./style.css')webpack 通過配置文件執行的結果和上一章節通過命令行 :
C:\mywebpack>webpack entry.js bundle.js --module-bind 'css=style!css' 執行的結果是一樣的.
（6）.插件：
接下來，我們利用一個最簡單的 BannerPlugin 內置插件來實踐插件的配置和運行，這個插件的作用是給輸出
的文件頭部添加注釋信息。
修改 webpack.config.js，添加 plugins：
var webpack = require('webpack') module.exports = { entry: './entry.js', output: { path: __dirname, filename: 'bundle.js' }, module: { loaders: [ {test: /\.css$/, loader: 'style!css'} ] }, plugins: [ new webpack.BannerPlugin('This file is created by zhaoda') ] } 然后運行 webpack，打開 bundle.js，可以看到文件頭部出現了我們指定的注釋信息：
/*! This file is created by zhaoda */ /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; // 后面代碼省略（7）.開發環境：
當項目逐漸變大，webpack 的編譯時間會變長，可以通過參數讓編譯的輸出內容帶有進度和顏色：
C:\mywebpack>webpack --progress --colors
如果不想每次修改模塊后都重新編譯，那么可以啟動監聽模式。開啟監聽模式后，沒有變化的模塊會在編
譯后緩存到內存中，而不會每次都被重新編譯，所以監聽模式的整體速度是很快的。
C:\mywebpack>webpack --progress --colors --watch
使用 webpack-dev-server 開發服務是一個更好的選擇。它將在 localhost:8080 啟動一個 express 靜
態資源 web 服務器，並且會以監聽模式自動運行 webpack，在瀏覽器打開 http://localhost:8080/
可以瀏覽項目中的頁面和編譯后的資源輸出，並且通過一個 socket.io 服務實時監聽它們的變化並自動刷新
頁面。
# 安裝C:\mywebpack>cnpm install webpack-dev-server -g
# 運行C:\mywebpack>webpack-dev-server --progress --colors
四.注意事項：記得每次打包到bundle.js的時候需要清空bundle.js中的內容不然文件會被多次打包加入其中,顯示內容會出錯。