iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 5
0

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

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

https://ithelp.ithome.com.tw/upload/images/20171224/20107828wZ0GBnE9XC.png

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

https://ithelp.ithome.com.tw/upload/images/20171224/20107828bQ8hgZfB6i.png

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

  "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. 請愛CYBERの audio / VISUAL

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

https://ithelp.ithome.com.tw/upload/images/20171225/20107828JLmJrorBQp.jpg

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

關於作者

Vibert Thio

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


上一篇
§d04§ 荒野探勘部!山也模組,地也模組,Shader 也模組!Three.js + Webpack 專案架構。
下一篇
§d06§ 開天闢地建環境!音像世界的框架!React + Three.js + Webpack 實作!
系列文
aesthEtic,CYBERの audio / VISUAL,網頁中的聲音與影像研究30

尚未有邦友留言

立即登入留言