資訊專欄INFORMATION COLUMN
摘要：目錄許多開發者會把的目錄命名為但這並不強迫。所有的檔案都會使用從被編譯成。同時有個小小的重點那就是我們可已觀察編譯後的檔案大小。在專案目錄下執行可以觀察截至目前為止的結果。我們的目標是要把編譯封裝到我們的中。
在今時今日，webpack 已經成為前端開發非常重要的工具之一。本質上它是一個 Javascript 模組封裝工具，但透過 loaders 和 plugins 它也可以轉換封裝其他前端的資源檔像是 HTML，CSS，甚至是圖片等，讓我們能夠控制程式發出 HTTP 請求的數量（編譯結果的檔案數量）。我們可以使用偏好的方式去撰寫這些資源檔像是 Jade, Sass, ES6 等等。同時也讓我們能夠輕易的使用來自 npm 的套件。
這篇文章目標讀者是那些剛接觸 webpack 的新手。內容將會包含設定，模組的使用，loaders，plugins，code splitting（分拆程式碼），熱替換（Hot module replacement）。
每過一陣子，重新學習 webpack 就會有些新的發現 - 廢話。
為了完成文章中的練習您需要些前置作業：安裝 Nodejs（譯者使用 v6.9.2），如果您還麼安裝那麼這邊有篇完整使用 nvm 安裝的教學。
設定讓我們開始來使用 npm 初始化專案與安裝 webpack。
$ mkdir webpack-demo $ cd webpack-demo $ npm init -y $ npm i webpack@2 -D $ npm view webpack version # 2.2.1 $ mkdir src $ touch index.html src/app.js webpack.config.js
上面這些檔案的概略說明：
index.html - 首頁，載入使用編譯好的 Javascript 檔案。
src/ 目錄 - 許多開發者會把 Source Code 的目錄命名為 src 但這並不強迫。
webpack.config.js - 設定 webpack 行為的設定檔，這邊我們可以先概略了解一下 webpack 的行為可以靠設定檔或者指令的參數調整，而 webpack.config.js 是預設的設定檔名稱。
src/app.js - 這是我們程式的 Entry point。
接著編輯我們剛產出的這些檔案
index.html
Hello webpack 2
src/app.js
const root = document.querySelector("#root")
root.innerHTML = `Hello webpack 2
`
webpack.config.js
const path = require("path")
const config = {
/**
* webpack 執行環境，即 webpack 載入檔案時相對路徑的根目錄環境
* 預設（沒有設定時）為執行指令（webpack）所在的那個目錄
*
* 【其他】
* 假設自己新增一個 build/build.js 檔案，使用載入 webpack 的作法
*
* 例如範例：https://github.com/andyyou/webpack-context-prove/blob/master/build/build.js#L14
*
* 在不同目錄執行：
* > node build/build.js (in root/ folder)
* > node build.js (in build/ folder)
* 預設 context 會分別為 root/ 和 root/build/
*/
context: path.join(__dirname, "src"),
/**
* Entry point
* 因為設定了 context 所以不需要加上 src/ 了
*/
entry: "./app.js",
/**
* 輸出路徑與檔名
*/
output: {
path: path.join(__dirname, "dist"),
filename: "bundle.js"
},
/**
* loaders 對應使用規則
*/
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: [
{
/* webpack 2.x 移除了省略 -loader 的寫法 */
loader: "babel-loader",
options: {
presets: [
/* Loose mode and No native modules(Tree Shaking) */
["es2015", { modules: false, loose: false }]
]
}
}
]
}
]
}
}
module.exports = config
上面這些是常見的基本設定，它告訴 webpack 如何編譯我們的原始碼，進入點是 src/app.js 輸出的檔案則放在 dist/bundle.js。
所有的 .js 檔案都會使用 Bable 從 ES2015 被編譯成 ES5。
Babel 從 6.13.0 之後提供額外的參數 loose 和 modules
loose: 提供 loose 編譯模式，該模式啟動下 Babel 會盡可能產生較精簡的 ES5 程式碼，預設 false 會盡可能產出接近 ES2015 規範的程式碼。
modules: 轉換 ES2015 module 的語法（import）為其它類型，預設為 true 轉換為 commonjs。
為了要能夠執行我們需要安裝 babel-core，babel-loader 和 babel-preset-es2015。上面還有一個值得注意的地方就是 {modules: false} 關閉這個設定是為了提供 Tree Shaking 的特性 - 移除沒有使用到的 exports 來縮小編譯的檔案大小。
$ npm i babel-core babel-loader babel-preset-es2015 -D
最後我們在 package.json 補上 scripts 的部分。
"scripts": {
"start": "webpack --watch",
"build": "webpack -p"
}
到這步我們就可以使用 npm start 來執行 webpack，加入參數 --watch 會讓 webpack 進入監視模式，當發現檔案有異動時就會立即重新編譯我們的原始碼。在 console 畫面會輸出類似下面的訊息來告知我們 bundle 已經被建立了。同時有個小小的重點那就是我們可已觀察編譯後的檔案大小。
Webpack is watching the files…
Hash: f4fadf78c49f43d8a078
Version: webpack 2.2.1
Time: 1342ms
Asset Size Chunks Chunk Names
bundle.js 2.6 kB 0 [emitted] main
[0] ./app.js 87 bytes {0} [built]
在專案目錄下執行 open index.html 可以觀察截至目前為止的結果。
開啟 dist/bundle.js 看看 webpack 編譯的結果，上半部是 webpack 處理模組載入的程式碼，最下面則是我們的模組。
到這您可能不覺得有什麼特別的，不過一旦我們開始使用 ES2015 來開發並將程式模組化，那麼 webpack 就可以替我們處理後續的工作讓我們的原始碼編譯成可以在瀏覽器執行的版本。
接著，我們可以透過 Ctrl + C 來停止 webpack，換成執行 npm run build 可以編譯產品模式的 bundle（壓縮）。
您可以注意到檔案大小從 2.6kB 變成 587 bytes，再次觀察 dist/bundle.js 會發現程式碼已經被 Uglify 了。
至此我們初始化了專案並對 webpack 設定有了基本的了解。
模組webpack 本身知道該如何處理載入各種格式的 Javascript 模組，比較值得注意的有兩個：
ES2015 import
CommonJS require()
我們使用 lodash 來試驗看看
$ npm i lodash -S
src/app.js
import {groupBy} from "lodash/collection"
const people = [{
manager: "Jen",
name: "Bob"
}, {
manager: "Jen",
name: "Sue"
}, {
manager: "Bob",
name: "Shirley"
}, {
manager: "Bob",
name: "Terrence"
}]
const managerGroups = groupBy(people, "manager")
const root = document.querySelector("#root")
root.innerHTML = `${JSON.stringify(managerGroups, null, 2)}`
執行 npm start 然後在瀏覽器重新載入 index.html 應該要看到我們透過 lodash 區分群組的結果。
接著讓我們把 people 的資料搬移到 src/people.js
src/people.js
const people = [{
manager: "Jen",
name: "Bob"
}, {
manager: "Jen",
name: "Sue"
}, {
manager: "Bob",
name: "Shirley"
}, {
manager: "Bob",
name: "Terrence"
}]
export default people
在 src/app.js 使用 import 載入 people.js
import {groupBy} from "lodash/collection"
import people from "./people"
const managerGroups = groupBy(people, "manager")
const root = document.querySelector("#root")
root.innerHTML = `${JSON.stringify(managerGroups, null, 2)}`
注意：不使用相對路徑的例如 lodash/collection 模組將會從 /node_modules 載入，我們自定義的模組通常使用相對路徑。
匯入模組時的 path 分成 函式庫 node_modules 相對路徑 絕對路徑
函式庫：什麼都不加，單純 library name
相對路徑：./ 開頭
絕對路徑：/ 開頭
第二小節我們示範了模組的使用，也就是我們可以把程式模組化再使用 webpack 來處理匯入使用的部分。
Loaders上面我們已經使用了 babel-loader，它是眾多 loader 中的一個，功能就是把 ES2015 轉成 ES5。而 loaders 的功用就是告訴 webpack 該如何處理匯入的檔案，通常是 Javascript 但 webpack 不限於處理 Javascript，其他資源檔像是 Sass，圖片等也都可以處理，只要提供對應的 loader。
同時 loader 也可以串連使用，概念上類似於 Linux 中的 pipe，A Loader 處理完之後把結果交給 B Loader 繼續轉換，以此類推。
最好的示範範例就是匯入 Sass 的流程，下面就讓我們來看看。
我們的目標是要把 Sass 編譯封裝到我們的 bundle 中（Javascript）。這個轉換過程需要一些 loaders 和函式庫：
$ npm i css-loader style-loader sass-loader node-sass -D
為處理 .scss 類型的檔案加入新的編譯規則
module: {
rules: [
// {...},
{
test: /.scss$/,
/**
* use 屬性是用來套用，串接多個 loaders。
* v2 為了相容的因素保留 loaders 屬性，loaders 為 use 的別名，
* 盡可能的使用 use 代替 loaders
*/
use: [
"style-loader",
"css-loader",
"sass-loader"
]
}
// {...}
]
}
每當我們修改了 webpack.config.js 我們就必須重啓。 Ctrl + C -> npm start
設定 loaders 的陣列實際上會反過來逐一執行：
sass-loader - 編譯 Sass 成為 CSS
css-loader - 解析 CSS 轉換成 Javascript 同時解析相依的資源
style-loader - 輸出 CSS 到 document 的