webpack入門(譯)
本文由官方Tutorial Getting Started 整理翻譯，因為該指南解決了我在上手webpack過程中遇到的諸多問題。
WELCOME
這份指南始終圍繞一個簡單例子。通過學習本教程你可以學到：
- 如何安裝webpack
- 如何使用webpack
- 如何使用loader
- 如何使用開發服務器
安裝WEBPACK
首先你需要安裝有node，然后執行
npm install webpack -g
這會使webpack命令生效
開始
我們從一個空文件夾開始，首先創建以下文件
然后在該文件夾根目錄下執行以下命令：
webpack ./entry.js bundle.js 這會編譯你的entry.js文件并生成bundle.js。倘若成功，將有以下信息輸出：
用瀏覽器打開index.html，會出現It works.
再添加一個文件
接下來，我們會添加一個新文件，并加入如下代碼。
再執行以下命令
webpack ./entry.js bundle.js 刷新瀏覽器，此時你會看到文字變為"It works from content.js."
webpack會分析你入口文件對于其他文件的依賴，這些文件（通常稱為模塊）也會被包含在bundle.js中。
第一個LOADER
我們希望為我們的應用添加css文件。webpack原生僅支持JavaScript，所以我們需要css-loader來處理css文件，同時我們也需要style-loader來應用這些樣式。
運行npm install css-loader style-loader來安裝這些loader（此處使用局部安裝而非全局安裝），這會在你的目錄下生成node_modules文件夾。
需要改動的文件如下：
再次編譯并刷新瀏覽器你會看到應用的背景變為黃色。
綁定LOADER
我們不希望總是敲下如此冗長的require("!style!css!./style.css");，所以我們可以綁定文件的擴展名以簡化寫法為require("./style.css")。
執行以下的編譯命令：
webpack ./entry.js bundle.js --module-bind "css=style!css" 你將看到同樣的結果。
配置文件
我們可以將配置選項寫入配置文件中。
此后，僅需執行：
webpack 來編譯
webpack命令總會嘗試載入當前目錄的webpack.config.js文件
更友好地輸出
隨著項目的增長，編譯過程可能會越來越長，所以我們可以展示一些進度條以及增加配色來實現更友好地輸出。我們可以通過以下命令達到目的：
webpack --progress --colors 監聽模式
當我們不希望在文件改動后手動執行編譯操作時
webpack --progress --colors --watch 開發服務器
提供開發服務器是非常好的一項服務，可以替換python -m SimpleHTTPServer啟用HTTP靜態服務器
通過以下命令全局安裝
npm install webpack-dev-server -g
啟動服務器
webpack-dev-server --progress --colors 這會綁定一個小型express服務器到localhost:8080，來為你的靜態資源及bundle（自動編譯）服務。通過訪問http://localhost:8080/webpack-dev-server/bundle，bundle每次重編譯后瀏覽器頁面都會自動更新。