Webpack 是近段時間非常流行的前端流程處理工具，用于實時執行建構任務和預處理你的檔案。
你也許會使用 Grunt 或者 Gulp 來做類似的事情。首先建立一個編譯鍊，然後在上面定義從何處讀取代碼，将壓縮處理好的 CSS 和 JavaScript 等靜态資源輸出到什麼地方。
這些工具都非常流行和好用，然而我卻要向你安利另一種實作此類需求的方法，那就是使用 Webpack。新技能Get！
什麼是 Webpack？
Webpack 常被人們定義為“子產品打包工具”（module bundler），它讀取 JavaScript 子產品，分析它們之間的依賴關系，然後用盡可能高效的方式将它們組織在一起，最後生成一個獨立的 JS 檔案。似乎看起來并沒有什麼牛逼的技術，像 RequireJS 在多少年前就能實作相似的功能了。
當然，如果是這樣子我就沒必要安利你了，相比 RequireJS 之流它還是有自己的特色的。Webpack 能讀取的不光是原生的 JavaScript 檔案，子產品加載器的設計使得它能支援更豐富的格式。
例如，它能分析出你的 JavaScript 子產品需要一個 CSS 檔案，甚至能分析出這個 CSS 檔案需要的圖檔資源。然後，處理過的資源檔案隻包含最精簡的必須檔案。不信？讓我們現在來實戰體驗。
安裝
首先必須要安裝的是 Node.js，在這裡我們假定你已經正确安裝并且配置完畢。那麼安裝 Webpack 所需要做的事，就隻剩下輸入下面的這條指令：
npm install webpack -g
這條指令将全局安裝 Webpack，并能在系統的任何路徑下執行
webpack
指令。下面我們建立一個檔案夾，在裡面建立一個基本的 HTML 檔案，名為
index.html
，内容如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack fun</title>
</head>
<body>
<h2></h2>
<script src="bundle.js"></script>
</body>
</html>
需要注意的是，這裡定義的
bundle.js
暫時還不存在，稍後将由 Webpack 幫我們建立。另外，那個空的 H2 标簽稍後我們将會使用到。
接下來，在上面檔案夾裡建立兩個 JS 檔案，分别叫做：
main.js
、
say-hello.js
。
main.js
你可以了解為 main 方法，也就是我們代碼主要的執行入口。
say-hello.js
是一個簡單的子產品，它接收一個人名和 DOM 元素，然後在這個 DOM 元素上顯示一條包含人名的歡迎資訊。
// say-hello.js
module.exports = function (name, element) {
element.textContent = 'Hello ' + name + '!';
};
定義完
say-hello.js
這個子產品後，我們在
main.js
裡引用它，引用方法十分簡單，隻需要下面這兩行代碼：
// main.js
var sayHello = require('./say-hello');
sayHello('Guybrush', document.querySelector('h2'));
如果現在我們打開前面建立的那個 HTML 檔案，你們發現頁面上沒有顯示任何内容。因為我們既沒有引用
main.js
，也沒有将其處理成浏覽器可執行的代碼。接下來，我們使用 Webpack 讀取
main.js
。如果能成功分析它的依賴，将會建立一個名為
bundle.js
的檔案，并能在浏覽器中執行。
回到指令行裡執行 Webpack，隻需簡單輸入如下指令：
webpack main.js bundle.js
第一個參數定義了 Webpack 分析依賴的起始檔案。首先，它檢視起始檔案裡是否定義了相關的依賴。如果有，它将讀入依賴的檔案，看看這個檔案是否也有其他的依賴。通過這種方式，遞歸讀取完整個程式依賴的全部檔案。一旦閱讀完畢，它将整個依賴打包為一個檔案，名為
bundle.js
。
在這個例子裡，當你按下回車後，你會看到類似下面的輸出：
Hash: 3d7d7339a68244b03c68
Version: webpack 1.12.12
Time: 55ms
Asset Size Chunks Chunk Names
bundle.js 1.65 kB 0 [emitted] main
[0] ./main.js 90 bytes {0} [built]
[1] ./say-hello.js 94 bytes {0} [built]
現在，打開
index.html
，浏覽器将會顯示
Hello Guybrush!
配置
如果每次運作 Webpack 都要指定輸入和輸出檔案的話就太讓人讨厭了。當然，開發者早就替我們想好了。其實和
Gulp
、
Grunt
類似，Webpack 需要在我們的項目根目錄下建立一個名為
webpack.config.js
的檔案，就可以簡化大量重複的指令參數。
在本例中，内容如下：
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
};
現在，我們隻需要輸入
webpack
這個指令，就能實作和之前一樣的操作。
開發伺服器
首先提個問題：每次你做了一些改動，如果都要手動去執行
webpack
指令來看結果的話，是不是特傻逼？要知道，
Gulp
在很早之前就支援定義
watch
這種監視檔案修改的任務了。是以，Webpack也不例外，甚至它還更進一步，提供了一個基于Node.js Express架構的開發伺服器。
npm install webpack-dev-server -g
首先運作上面的指令安裝開發伺服器，然後運作指令
webpack-dev-server
。這個指令将會啟動一個簡單的 Web 伺服器，以指令執行的路徑為靜态資源根目錄。下面我們打開浏覽器，輸入http://localhost:8080/webpack-dev-server/。如果一切正常，你将看到類似下面的内容：
現在，我們不僅有了一個超贊的輕量級 Web 伺服器，我們還有了一個孜孜不倦地監聽代碼變更的觀察者。如果 Webpack 發現我們修改了一個檔案，它會自動運作
webpack
指令打包我們的代碼并重新整理頁面。
假想一下，我們可以雙屏寫代碼，一個螢幕放浏覽器，一個螢幕開編輯器。浏覽器實時重新整理結果，無需我們做任何配置和操作，是不是很酷？
現在你可以自己感受一下：修改
main.js
裡面傳給
sayHello
方法的姓名參數，然後儲存檔案，看看浏覽器裡面的實時變化。
加載器（Loaders）
對于 Webpack 而言，最重要的特性就是加載器。加載器和
Gulp
Grunt
上的“任務”（tasks）類似。基本上都是讀取檔案，然後通過某種方式處理檔案，最後打包為我們所需的代碼。
本文中，我們想在代碼中用一些ES2015的文法。因為 ES2015 是目前最新的 JavaScript 版本，是以并沒有被所有的浏覽器支援。可是淫家就想寫最新的代碼裝逼怎麼辦？那隻好先寫，寫完後将 ES2016 版本的代碼轉換為老的 ES5 代碼。
為了實作這個需求，我們需要使用當下最流行的 Babel Loader 來進行轉換。根據官網的教程，我們使用下面的指令進行安裝：
npm install babel-loader babel-core babel-preset-es2015 --save-dev
這條指令不僅安裝了 Babel 加載器，還包含了它支援 ES2015 時所需要的依賴。
安裝完加載器，我們需要告訴 Webpack 使用什麼加載器，參考下面的執行個體更新
webpack.config.js
檔案：
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015']
}
}
],
}
};
在這個配置示例裡，我們需要注意幾個地方。首先，
test: /\.js$/
這行是一個正規表達式，表示檔案名滿足此正規表達式的檔案将會被此加載器處理。這裡，我們的定義是全部的JS檔案。類似的，
exclude: /node_modules/
則是告訴 Webpack 忽略
node_modules
檔案夾。
loader
和
query
我覺得十分好了解，就是使用Babel loader加載器處理ES2015文法的檔案。
重新開機開發伺服器，在指令行裡按下
ctrl+c
，重新輸入
webpack-dev-server
。現在我們來測試一下 ES6 的代碼是否能被正确翻譯呢？不如試試看将
sayHello
變量定義為一個常量。
const sayHello = require('./say-hello')
儲存後，Webpack應該自動重新編譯我們的代碼并重新整理浏覽器，你會發現代碼正常執行，什麼都沒有變。我們用編輯器打開
bundle.js
檔案，你會發現沒有
const
這個單詞。
Webpack就是這麼叼！
第二部分預告
在這篇教程的第二部分，我們将學習使用 Webpack 加載 CSS 和 圖檔檔案，同時讓你的網站為部署做好準備。
相關連結
- Introduction to Webpack: Part 1
- 詳解前端子產品化工具-Webpack
- Webpack Made Simple: Building ES6 & LESS with autorefresh
轉載于:https://my.oschina.net/syhily/blog/744098