現代化 Web 開發技術學習分享

上一次在介紹 mini-css-extract-plugin 時，有提到關於使用 background-image:url() 以相對路徑參考本地圖片時所發生的錯誤，最後是使用 file-loader 解決此問題；簡單來說，file-loader 就是用來處理一般開發網頁時所使用的靜態資源，例如：字形、圖片等等，將所有資源載入到 Webpack 內，並且解析資源的相互依賴，最後以配置的選項生成對應的結果；而 url-loader 則類似於 file-loader，可依資源的大小做對應的處理。此篇將介紹 file-loader 與 url-loader 的使用方法，以及兩者在應用時最大的差別為何。

PostCSS 是一套使用 JavaScript 轉換 CSS 的工具，有別於以往 Sass、Less 等預處理器將檔案編譯成 CSS，PostCSS 是針對 CSS 後續所作行為處理的後處理器，在某些情境也有可能為前處理器，透過載入並使用 Plugin 的方式來完成目的，常見的使用情境為 CSS Prefix、CSS Conpress 等等。此篇將介紹如何使用 postcss-loader 擴展我們的 CSS 語言特性，主要會以 Autoprefixer 這個 PostCSS Plugin 做示範，自動為編譯完成的 CSS 增加 Prefix，免除手動添加的麻煩。

以我自己來說，已經很少用純 CSS 來撰寫樣式表了，大多時候都是直接使用 SCSS 作為開發語言，既方便又高效，雖然說得透過編譯器使之編譯成 CSS 檔案才能在瀏覽器運行，但這一切對於現代化開發來講，似乎已經不成問題了。此篇將介紹如何使用 sass-loader 編譯我們的 Sass/SCSS 預處理器，並說明途中可能會遇到的陷阱，以及一般人最為困惑的 Node Sass 與 Dart Sass 使用上的差別。

此篇為接續上一篇再說明如何將 CSS 給單獨抽離的介紹文章。上一次我們利用了 style-loader 將 css-loader 處理過後的 CSS 注入到 HTML 內，將以 style 標籤的形式存在，但這有違一般開發的處理流程，建議還是將 CSS 檔案給獨立出來，既方便修改，也不會造成效能上的疑慮。這一次我們改用 mini-css-extract-plugin 將 CSS 給單獨抽離出來，並說明途中可能會踩到的坑以及該如何解決等辦法。

上次在介紹 Webpack 時有稍微提到 Loader 究竟是做什麼用，簡單來講，Webpack 本身只能處理 JavaScript 模組，如果要處理其他類型的文件，就需要使用相關的 Loader 進行轉換。Loader 可以理解為模組和資源的轉換器，它本身是一個 function，接受源文件作為參數傳遞，最後返回轉換後的結果。這次讓我們從最基本的打包 CSS 開始講解，利用 css-loader 抽取源文件相關的 CSS 檔進行轉換，並利用 css-loader 的好搭檔 style-loader 將轉換後的 CSS 附加到 style 標籤已進行存取。

Webpack 可說是近年來最為熱門的技術，以往在編寫 ES6、Sass/SCSS、Pug、CoffeeScript 等預處理器或需編譯內容時，通常都得透過自動化工具，如 Gulp、Grunt 等任務流程執行工具進行編譯處理，到了現在，Webpack 已逐漸取代這些工具，Webpack 本身提供許多強大的功能，包含現正熱門的 SPA (單頁式應用) 透過配置 loader 方式也能輕鬆應付。本篇將從 Webpack 運行原理開始做介紹，接著說明該如何建立 Webpack 運行環境，最後透過打包方式產出我們的第一個 bundle.js 檔案。

當初在學習 ES6 Modules 相關語法時，主要得依靠 Babel 編譯才能在 Node.js 中運行，原因為 Node.js 預設是使用 CommonJS 模組規範，事實上，大可不必這麼麻煩，Node.js 原生是支援 ES6 Modules 模組規範的，不過得透過一些方法才能將其切換，且不同版本還有各自的切換方法。本篇將使用 nvm (Node Version Manager) 切換不同的 Node.js 版本，並介紹在不同版本下該如何啟用對 ECMAScript 模塊的支持。

nvm 全名為 Node Version Manager，是一套用來管理 Node.js 版本的工具，在現代開發中，我們很常導入現有的 npm 套件幫助開發，像是 Webpack、Gulp、Browserify 等等，而這些套件都得依靠 Node.js 環境才能運行，且由於版本的差異，可能會造成無法運行的錯誤，開發者須同時擁有多個 Node.js 版本才方便進行測試，有別於以往 Node.js 下載安裝檔造成版本的綁定，使用 nvm 可同時存在多個 Node.js 版本，使用簡單的指令即可切換版本，推薦給所有的 Node.js 開發者。

此篇將紀錄從接觸 Gulp 開始到後來能夠獨立開發專案所需 Gulp 環境的學習總結。前面會先把之前所遇到的坑做一個解決辦法補充，比如透過 Babel 編譯後，require 語法無法在 Browser 運行等問題，以及使用 gulp-rename 套件後，該如何連同 HTML 相關的引用路徑做一個響應變動等等，最後也會提供我最為常用的 Gulp 開發環境，供有興趣的開發者快速導入現有專案。

隨著 JavaScript 版本的推進，ES6 版本已逐漸大眾化，在各種開發環境下，ES6 相關語法都能夠更有效率的幫助你完成目的，唯一的問題是，在 Node 環境中，ES6 的大部分特性都以支援，唯獨模組化機制尚未完整支援，都還是得依靠 Babel 等相關編譯器將代碼編譯成 ES5 代碼以解決兼容性問題。此篇將使用 import/export 等 ES6 module 語法撰寫我們的 Gulpfile，並透過 Babel 編譯以保證任務成功運行。