webpack是一個打包工具，基于nodeJS
Webpack 可以将多種靜态資源 js、css、less 轉換成一個靜态檔案，減少了頁面的請求。
由于 npm 安裝速度慢，本教程使用了淘寶的鏡像及其指令 cnpm，安裝使用介紹參照：使用淘寶 NPM 鏡像。
使用 cnpm 安裝 webpack：
cnpm install webpack -g
mkdir app
在 app 目錄下添加 runoob1.js 檔案，代碼如下：
document.write("It works.");
在 app 目錄下添加 index.html 檔案，代碼如下：
<html> <head> <meta charset="utf-8"> </head> <body> <script type="text/javascript" src="bundle.js" charset="utf-8"></script> </body> </html>
接下來我們使用 webpack 指令來打包：
webpack runoob1.js -o bundle.js
執行以上指令會編譯 runoob1.js 檔案并生成bundle.js 檔案，成功後輸出資訊如下所示：
在浏覽器中打開 index.html，輸出結果如下：
接下來我們建立另外一個 js 檔案 runoob2.js，代碼如下所示：
module.exports = "It works from runoob2.js.";
更新 runoob1.js 檔案，代碼如下：
document.write(require("./runoob2.js"));
Hash: dcf55acff639ebfe1677 Version: webpack 1.12.13 Time: 52ms Asset Size Chunks Chunk Names bundle.js 1.55 kB 0 [emitted] main [0] ./runoob1.js 41 bytes {0} [built] [1] ./runoob2.js 46 bytes {0} [built]
在浏覽器通路，輸出結果如下所示：
webpack 根據子產品的依賴關系進行靜态分析，這些檔案(子產品)會被包含到 bundle.js 檔案中。Webpack 會給每個子產品配置設定一個唯一的 id 并通過這個 id 索引和通路子產品。 在頁面啟動時，會先執行 runoob1.js 中的代碼，其它子產品會在運作 require 的時候再執行。
----------------------------------------------------------------------下面是過了一段時間，有想收藏一篇文章，以便對webpack的了解-----------------------------------------------------------
什麼是WebPack，為什麼要使用它？
A：這裡是webpack1.0+，2.0+請移步這裡(已經配置好的簡單腳手架) https://github.com/wjf444128852/dev-webpack
B：webpack2.0+案例：1 豆瓣熱映電影
C：react+webpack3.0+(開發和生産環境分離的腳手架，建議了解其他之後再參考，歡迎clone,issuse,擴充使用,原本配置參考dev分支) https://github.com/wjf444128852/react-webpack
其他：React DEMO
1：方形宮格抽獎：線上體驗抽獎 源碼位址：戳我
2：簡易背景管理系統：線上體驗(密碼随意) 源碼位址：戳我
二、官方參考
D：webpack中文網站 https://doc.webpack-china.org/
E：webpack英文網站 https://webpack.js.org/concepts/
正文從下面開始.................
WebPack可以看做是子產品打包機：它做的事情是，分析你的項目結構，找到JavaScript子產品以及其它的一些浏覽器不能直接運作的拓展語言（Scss，TypeScript等），并将其打包為合适的格式以供浏覽器使用。
今的很多網頁其實可以看做是功能豐富的應用，它們擁有着複雜的JavaScript代碼和一大堆依賴包。為了簡化開發的複雜度，前端社群湧現出了很多好的實踐方法
a:子產品化，讓我們可以把複雜的程式細化為小的檔案;
b:類似于TypeScript這種在JavaScript基礎上拓展的開發語言：使我們能夠實作目前版本的JavaScript不能直接使用的特性，并且之後還能能裝換為JavaScript檔案使浏覽器可以識别；
c:scss，less等CSS預處理器
.........
這些改進确實大大的提高了我們的開發效率，但是利用它們開發的檔案往往需要進行額外的處理才能讓浏覽器識别,而手動處理又是非常反鎖的，這就為WebPack類的工具的出現提供了需求。
其實Webpack和另外兩個并沒有太多的可比性，Gulp/Grunt是一種能夠優化前端的開發流程的工具，而WebPack是一種子產品化的解決方案，不過Webpack的優點使得Webpack可以替代Gulp/Grunt類的工具。
Grunt和Gulp的工作方式是：在一個配置檔案中，指明對某些檔案進行類似編譯，組合，壓縮等任務的具體步驟，這個工具之後可以自動替你完成這些任務。
Webpack的工作方式是：把你的項目當做一個整體，通過一個給定的主檔案（如：index.js），Webpack将從這個檔案開始找到你的項目的所有依賴檔案，使用loaders處理它們，最後打包為一個浏覽器可識别的JavaScript檔案。
優點：子產品化
在webpack看來一切都是子產品！這就是它不可不說的優點，包括你的JavaScript代碼，也包括CSS和fonts以及圖檔等等等，隻有通過合适的loaders，它們都可以被當做子產品被處理。
1、CSS
webpack提供兩個工具處理樣式表，<code>css-loader</code> 和 <code>style-loader</code>，二者處理的任務不同，<code>css-loader</code>使你能夠使用類似<code>@import</code> 和 <code>url(...)</code>的方法實作 <code>require()</code>的功能,<code>style-loader</code>将所有的計算後的樣式加入頁面中，二者組合在一起使你能夠把樣式表嵌入webpack打包後的JS檔案中。
需要分别安裝：<code>npm install --save-dev style-loader css-loader</code>
2、CSS modules
在過去的一些年裡，JavaScript通過一些新的語言特性，更好的工具以及更好的實踐方法（比如說子產品化）發展得非常迅速。子產品使得開發者把複雜的代碼轉化為小的，幹淨的，依賴聲明明确的單元，且基于優化工具，依賴管理和加載管理可以自動完成。
不過前端的另外一部分，CSS發展就相對慢一些，大多的樣式表卻依舊是巨大且充滿了全局類名，這使得維護和修改都非常困難和複雜。
最近有一個叫做 CSS modules 的技術就意在把JS的子產品化思想帶入CSS中來，通過CSS子產品，所有的類名，動畫名預設都隻作用于目前子產品。Webpack從一開始就對CSS子產品化提供了支援，在CSS loader中進行配置後，你所需要做的一切就是把”modules“傳遞都所需要的地方，然後就可以直接把CSS的類名傳遞到元件的代碼中，且這樣做隻對目前元件有效，不必擔心在不同的子產品中具有相同的類名可能會造成的問題。具體的代碼如下
這樣相同的類名也不會互相污染
3、CSS預編譯
Sass 和 Less之類的預處理器是對原生CSS的拓展，它們允許你使用類似于variables, nesting, mixins, inheritance等不存在于CSS中的特性來寫CSS，CSS預處理器可以這些特殊類型的語句轉化為浏覽器可識别的CSS語句，
你現在可能都已經熟悉了，在webpack裡使用相關loaders進行配置就可以使用了，以下是常用的CSS 處理loaders
a:less-loader
b:sass-loader
c:stylus-loader
還有一個CSS處理平台-PostCSS，可以讓你用CSS事先更多功能，比如如何使用PostCSS，我們使用PostCSS來為CSS代碼自動添加适應不同浏覽器的CSS字首。
首先安裝postcss-loader 和 autoprefixer（自動添加字首的插件）
二、webpack-pulgins
插件（Plugins）是用來拓展Webpack功能的，它們會在整個建構過程中生效，執行相關的任務。
Loaders和Plugins常常被弄混，但是他們其實是完全不同的東西，可以這麼來說，loaders是在打包建構過程中用來處理源檔案的（JSX，Scss，Less..），一次處理一個，插件并不直接操作單個檔案，它直接對整個建構過程其作用。
Webpack有很多内置插件，同時也有很多第三方插件，可以讓我們完成更加豐富的功能。
1、如何使用插件？
要使用某個插件，我們需要通過npm安裝它，然後要做的就是在webpack配置中的plugins關鍵字部分添加該插件的一個執行個體（plugins是一個數組），我們添加了一個實作版權聲明的插件。如HtmlWebpackPugin插件，
該插件的作用是依據一個簡單的模闆，幫你生成最終的Html5檔案，這個檔案中自動引用了你打包後的JS檔案。每次編譯都在檔案名中插入一個不同的哈希值。
//安裝
npm install --save-dev html-webpack-pugin
未完待續