0. 今日工事：打包機的乾濕分離

• Webpack 江湖：走跳的基本眉角
  • 第六感直覺判斷：環境變數法
  • 乾濕分離：webpack.dev.config.js, webpack.prod.config.js
  • 最法的：Best Practice

1. Webpack 江湖：走跳的基本眉角

插曲：今天談打包機 config 的神秘儀式「乾濕分離」。這是hardcore 的技術文你知道的？談談龜毛三體師如何打造練功環境。modern web 裡，webpack 應該是基礎知識，這裡不多說原理細節。懂？一切都是為了網頁音像的世界鋪路啊！邁進！畢竟到時候套件可是多得麻煩呢，不會希望聲音、影像、UI 全部都給大雜燴一塊 code 吧？

租公寓的時候有些人很重視乾濕分離，寫 webpack 則強調dev/prod(development 與 production)分離。走跳江湖，人人都有一套自己的分離方法論，我自行歸類以下常見的三套武功：

1.1 第六感直覺判斷：環境變數法

曾經目睹，有人直接使用 用ENV當作環境變數去設定，然後在webpack.config.js裡面：

// 用這兩個變數來指定相應的指令
const PRODUCTION = process.env.NODE_ENV === 'production';
const DEVELOPMENT = process.env.NODE_ENV === 'development';

此者強於，心法直覺，第六感直接懂。任何學過if, esle的俠客都足以秒邏輯。缺點在於寫除來的 config 落落長，要命難讀，可謂易攻難守不好維護。

1.2 乾濕分離：webpack.dev.config.js, webpack.prod.config.js

十年養成，我以前的歲月當中，打包雞 config 都直接分兩個：webpack.dev.config.js 和 webpack.prod.config.js。並且直接在 npm script 裡面的dev和build引用兩個檔案。

  "scripts": {
    "dev": "webpack-dev-server --config ./webpack.dev.config.js",
    "build": "webpack -d --config ./webpack.prod.config.js --colors",
  },

因為這樣不會單一檔案冗長，醜得要命！人生這樣實作下來，好壞參半，月有陰晴。美麗之處在於：檔案分開來了，code 就好讀了。反面，練功過程發現，有時候想要加alias或是改entry兩邊還要乾瞪眼一起改，有夠機掰。尤其是加 loaders 什麼的，時常打錯字找不到 bug。慢慢我開始會把webpack.loader.js一些 dev/prod共用的東西分出獨立的檔案，並且用 import 到 config 裡面：

// webpack.dev.config.js 與 webpack.prod.config.js
const loaders = require('./webpack.loaders');
...
module.exports = {
  ...
  module: {
    loaders
  },
  ...
}

但是分多了，就芬多精。從webpack.config.js變成落落成四五個 config 檔看了就不太爽。直到前陣子，發現了 webpack 官網的 best practice 就全部改掉！

1.3 最法的：Best Practice

邏輯與檔案分離法極為類似，差異關鍵在多使用了 SurviveJS 開的一個套件 webpack-merge。README 裡就講許多使用方式，webpack doc 就用了最簡單的 pattern，簡單愛，這批單純。

以webpack.common.js的使用為例。所有dev/prod共用的全部放到webpack.common.js裡面就好，最後在兩個 config 裡面做 merge：

  // webpack.prod.config.js
  const merge = require('webpack-merge');
  const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
  const common = require('./webpack.common.js');

  module.exports = merge(common, {
    devtool: 'source-map',
    plugins: [
      new UglifyJSPlugin()
    ]
  })

從此，該分的分，該和的和。附上 repo 和 fs:

three-sketches/
├── LICENSE.md
├── assets
├── node_modules
├── package.json
├── public
├── readme.md
├── src
├── webpack.common.config.js
├── webpack.dev.config.js
├── webpack.prod.config.js
└── yarn.lock

4 directories, 7 files

2. 請愛ＣＹＢＥＲの ａｕｄｉｏ / ＶＩＳＵＡＬ

喔！太棒了！我們的世界越來越好了。dev/prod已經分離，

慢慢的走，一步一腳印，等待，是為了抽更長遠的路。凜冬將盡，browser 裡的野獸蠢蠢欲動，聲之聲、聲之情、聲之形。那是大鼓吧？「嗯！嗯！嗯！嗯！」啊！小鼓們也到了。若不想閉上眼睛，請繼續爬山祈禱。

關於作者

Vibert Thio

致力於將對於技術的深度研究轉化為新型態藝術創作的能量，並思考技術的拓展/侷限與其對於藝術論述/呈現的影響。專長為數位藝術創作、音像程式設計、互動設計，喜愛即時運算的臨場感與不可預測。

• github
• vibertthio.com
• facebook
• medium