React Hooks with Typescript: Use State and Use Effect in 2020.

Redux Toolkit 使用指南

ESLint 介紹

什麼是 Prettier

React-Styleguidist

基本的 Plugin 架構

這邊總結一下優化 Webpack 打包體積以及打包速度時，使用了哪些方法。

之前介紹了 Webpack-Dll-Plugin HappPack 來優化 Webpack 打包速度。今天要介紹的是優化 Webpack Bundle 體積大小，首先使用之前介紹的 Webpack-Bundle-Analyzer 來觀察 Bundle 檔案結構。

什麼是 Runtime & Mamifest ?

關於 HappyPack

Webpack-Bar

Webpack-Notifier

Webpack-Bundle-Analyzer

Friendly-Errors-Webpack-Plugin

Copy-Webpack-Plugin

Npm-Install-Webpack-Plugin

Webpack 打包處理的項目非常多，包括 JS 打包並 Babel 轉譯、CSS 打包並提取、處理雪碧圖、透過 html-webpack-plugin 生成 HTML 等。當專案規模越來越大，開發階段的 Bundle 速度會越來越慢，影響開發的節奏。優化 Webpack 打包速度有許多方式，今天就介紹其中一種優化效果相當好的 Webpack-Dll-Plugin。

Webpack 官網 source-map 定義

CSS Sprite

一直以來 CSS 架構都存在一些問題，比如：

關於 PostCSS

專案使用 SCSS 寫法，我們之前用 Gulp 來 Compile，也使用過 ASP.NET MVC Web Compiler 來處理，後者的缺點是必須使用 Visual Studio 來開發，我個人還是習慣使用 VS Code，所以變成改 SCSS 的話就要在 Visual Studio 裡面改… Orz。

output filename 配置參數

關於 Babel

為了區分 develop、production 設定，我們將 Webpack 設定檔拆分為 webpack.common.js、webpack.dev.js、webpack.prod.js 三個檔案。 dev 與 prod 主要區別在於開發階段不須處理 Minify / Uglify、Output 的設定不同、Source-map 設定也不同，另外開發階段可以使用 Webpack-dev-server、打包分析工具等等。

在實際的專案當中，HTML 頁面上很有可能出現以下的程式碼。

為了把打包完的檔案引入頁面，我們透過 Html-Webpack-Plugin 來產生 Partial View 並引入打包檔案。Views 資料夾底下新增 BundleTemp 資料夾，使用 BundleTemp/_JsTemplate.cshtml 為模板來產生引入 JS 檔案的頁面。同樣的，以 BundleTemp/_CssTemplate.cshtml 為模板來產生引入 CSS 檔案的頁面，最後透過 Html-Webpack-Plugin 將 Partial View 產生到 Views/Bundle 資料夾。

專案資料夾結構

ASP.NET Bundling and Minification

今年三月剛到新公司報到，過試用期之後第一個任務，就是在 ASP.NET MVC 導入 Webpack。主管跟我提這個想法時，當下其實沒想太多，心想著 Webpack 又不是沒用過，就來試試看吧！實際執行後才發現自己對於 Webpack 其實一知半解。以前直接從網路上 Copy 設定檔下來用，根本沒去理解到底是怎麼運作的。像 Alias、Externals、DefinePlugin 一開始都搞不太清楚差別… 也不清楚該如何架構多入口頁面的專案，更不用說後續的優化打包檔案大小以及優化打包速度。幸好在不斷的閱讀文件並不斷嘗試後，逐漸摸索出一點心得。希望能透過這次 IT 鐵人賽分享這次在 ASP.NET MVC 導入 Webpack 的經驗。