原文連結：https://www.runoob.com/w3cnote/webpack-tutorial.html
Webpack 是一個前端資源載入/打包工具。它將根據模組的依賴關係進行靜態分析，然後將這些模組按照指定的規則生成對應的靜態資源。
從圖中我們可以看出，Webpack 可以將多種靜態資源 js、css、less 轉換成一個靜態檔案，減少了頁面的請求。
接下來我們簡單為大家介紹 Webpack 的安裝與使用。
安裝 Webpack
在安裝 Webpack 前，你本地環境需要支援 node.js。
由於 npm 安裝速度慢，本教程使用了淘寶的映象及其命令 cnpm，安裝使用介紹參照：使用淘寶 NPM 映象。
使用 cnpm 安裝 webpack：
建立專案
接下來我們建立一個目錄 app：
在 app 目錄下新增 runoob1.js 檔案，程式碼如下：
app/runoob1.js 檔案
在 app 目錄下新增 index.html 檔案，程式碼如下：
app/index.html 檔案
接下來我們使用 webpack 命令來打包：
執行以上命令會編譯 runoob1.js 檔案並生成bundle.js 檔案，成功後輸出資訊如下所示：
Hash: a41c6217554e666594cb
Version: webpack 1.12.13
Time: 50ms
Asset Size Chunks Chunk Names
bundle.js 1.42 kB 0 [emitted] main
[0] ./runoob1.js 29 bytes {0} [built]
在瀏覽器中開啟 index.html，輸出結果如下：
建立第二個 JS 檔案
接下來我們建立另外一個 js 檔案 runoob2.js，程式碼如下所示：
app/runoob2.js 檔案
更新 runoob1.js 檔案，程式碼如下：
app/runoob1.js 檔案
接下來我們使用 webpack 命令來打包：
在瀏覽器訪問，輸出結果如下所示：
webpack 根據模組的依賴關係進行靜態分析，這些檔案(模組)會被包含到 bundle.js 檔案中。Webpack 會給每個模組分配一個唯一的 id 並透過這個 id 索引和訪問模組。 在頁面啟動時，會先執行 runoob1.js 中的程式碼，其它模組會在執行 require 的時候再執行。
LOADER
Webpack 本身只能處理 JavaScript 模組，如果要處理其他型別的檔案，就需要使用 loader 進行轉換。
所以如果我們需要在應用中新增 css 檔案，就需要使用到 css-loader 和 style-loader，他們做兩件不同的事情，css-loader 會遍歷 CSS 檔案，然後找到 url() 表示式然後處理他們，style-loader 會把原來的 CSS 程式碼插入頁面中的一個 style 標籤中。
接下來我們使用以下命令來安裝 css-loader 和 style-loader(全域性安裝需要引數 -g)。
執行以上命令後，會再當前目錄生成 node_modules 目錄，它就是 css-loader 和 style-loader 的安裝目錄。
接下來建立一個 style.css 檔案，程式碼如下：
app/style.css 檔案
修改 runoob1.js 檔案，程式碼如下：
app/runoob1.js 檔案
接下來我們使用 webpack 命令來打包：
在瀏覽器訪問，輸出結果如下所示：
require CSS 檔案的時候都要寫 loader 字首 !style-loader!css-loader!，當然我們可以根據模組型別（副檔名）來自動繫結需要的 loader。 將 runoob1.js 中的 require("!style-loader!css-loader!./style.css") 修改為 require("./style.css") ：
app/runoob1.js 檔案
然後執行：
在瀏覽器訪問，輸出結果如下所示：
顯然，這兩種使用 loader 的方式，效果是一樣的。
配置檔案
我們可以將一些編譯選項放在配置檔案中，以便於統一管理：
建立 webpack.config.js 檔案，程式碼如下所示：
app/webpack.config.js 檔案
接下來我們只需要執行 webpack 命令即可生成 bundle.js 檔案：
webpack 命令執行後，會預設載入當前目錄的 webpack.config.js 檔案。
外掛
外掛在 webpack 的配置資訊 plugins 選項中指定，用於完成一些 loader 不能完成的工作。
webpack 自帶一些外掛，你可以透過 cnpm 安裝一些外掛。
使用內建外掛需要透過以下命令來安裝：
比如我們可以安裝內建的 BannerPlugin 外掛，用於在檔案頭部輸出一些註釋資訊。
修改 webpack.config.js，程式碼如下：
app/webpack.config.js 檔案
然後執行:
webpack
開啟 bundle.js，可以看到檔案頭部出現了我們指定的註釋資訊。
開發環境
當專案逐漸變大，webpack 的編譯時間會變長，可以透過引數讓編譯的輸出內容帶有進度和顏色。
如果不想每次修改模組後都重新編譯，那麼可以啟動監聽模式。開啟監聽模式後，沒有變化的模組會在編譯後快取到記憶體中，而不會每次都被重新編譯，所以監聽模式的整體速度是很快的。
當然，我們可以使用 webpack-dev-server 開發服務，這樣我們就能透過 localhost:8080 啟動一個 express 靜態資源 web 伺服器，並且會以監聽模式自動執行 webpack，在瀏覽器開啟 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以瀏覽專案中的頁面和編譯後的資源輸出，並且透過一個 socket.io 服務實時監聽它們的變化並自動重新整理頁面。
在瀏覽器開啟 http://localhost:8080/ 輸出結果如下：
