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