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

拿出勇者鬥惡龍般的勇氣，我們一起超越不可能！

任務

ASP.NET MVC 導入 Webpack 整合前端開發流程

網站類型

一般中大型購物網站

目前開發環境

• Visual Studio 2017
• Visual Studio Code
• ASP.NET MVC
• React
• Reactjs.NET 處理 SSR
• SASS
• ASP.NET Bundling and Minification
• Gulp
• Sprite Smith

專案現況

設計及切版是由設計部門處理，因此 SASS 檔是在不同的 repo 專案，使用 Gulp Compile SASS 並產生 Sprite 圖後，再搬移回主專案。開發流程繁瑣，不同部門的人員協作時，須注意兩個專案，檔案是否有不同步的情形。
專案使用的打包工具 Bundling and Minification 有一些缺點，比如所有的 Module 全部都會塞到 Window 底下汙染全域、需要維護 BundleConfig 檔、只能人工區分 Common 檔等等。因此希望透過導入 Webpack 來統整前端開發流程。

希望優化 / 導入的項目

• 導入 Webpack V4 整合前端開發流程
• 透過 Webpack Compile SASS
• 導入 CSS Module
• 集成 PostCSS / Autoprefixer
• 使用 Sprite-Smith-Plugin 產生雪碧圖
• 導入 ESLint & Prettier 確保團隊程式碼品質
• 導入 React Styleguidist
• 使用視覺化分析工具檢視打包策略是否須調整

目錄

1. Webpack with ASP.NET MVC - 前言
2. 比較 Webpack 與 ASP.NET MVC Bundle 工具
3. ASP.NET MVC 專案架構及入口頁面設定
4. 使用 Html-Webpack-Plugin 引入 Bundle 檔案
5. 將 Module 暴露到全域
6. Webpack 設定檔配置 Common / Dev / Prod
7. Babel 設定
8. 頁面緩存設定
9. ASP.NET MVC 導入 SASS
10. ASP.NET MVC 導入 PostCSS
11. ASP.NET MVC 導入 CSS Modules
12. 使用 Sprite-Smith-Plugin 產生 CSS Sprite
13. Webpack source-map 設定
14. Webpack-Dll-Plugin 介紹
15. Webpack Plugin 介紹
16. Webpack Plugin 介紹 - 檔案處理篇
17. Webpack Plugin 介紹 - 錯誤處理篇
18. Webpack Plugin 介紹 - 分析工具篇
19. Webpack Plugin 介紹 - 提示工具篇
20. Webpack Plugin 介紹 - 打包資訊工具篇
21. HappyPack 介紹
22. 提取 Runtime & Manifest
23. 優化 Webpack 打包檔案大小
24. Webpack 優化總結
25. 動手實作 Webpack-Plugin
26. 導入 React-Styleguidist
27. 導入 Prettier
28. 導入 ESLint
29. 為專案客製化 ESLint 規則
30. 導入 Webpack 心得