Webpack:前端資源模組化管理和打包工具
一.介紹：
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中的內容不然檔案會被多次打包加入其中,顯示內容會出錯。