iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
Modern Web

Webpack with ASP.NET MVC 系列

在 ASP.NET MVC 環境導入 Webpack 打包工具,集成 Reactjs.NET, CSS Module, PostCSS, React Styleguidist, ESLint 等前端開發工具

鐵人鍊成 | 共 30 篇文章 | 39 人訂閱 訂閱系列文 RSS系列文
DAY 1

Webpack with ASP.NET MVC - 前言

今年三月剛到新公司報到,過試用期之後第一個任務,就是在 ASP.NET MVC 導入 Webpack。主管跟我提這個想法時,當下其實沒想太多,心想著 Webpa...

2018-10-01 ‧ 由 TYSON 分享
DAY 2

比較 Webpack 與 ASP.NET MVC Bundle 工具

ASP.NET Bundling and Minification 缺點 新增刪除模組,須手動修改 BundleConfig 引用開源程式模組不方便 人工區分...

2018-10-02 ‧ 由 TYSON 分享
DAY 3

ASP.NET MVC 專案架構及入口頁面設定

專案資料夾結構 ╸ ASP.NET.WEBPACK ┝╸ App_Data ┝╸ App_Start ┝╸ Attributes ┝╸ Cont...

2018-10-03 ‧ 由 TYSON 分享
DAY 4

使用 Html-Webpack-Plugin 引入 Bundle 檔案

為了把打包完的檔案引入頁面,我們透過 Html-Webpack-Plugin 來產生 Partial View 並引入打包檔案。Views 資料夾底下新增 Bu...

2018-10-04 ‧ 由 TYSON 分享
DAY 5

將 Module 暴露到全域

在實際的專案當中,HTML頁面上很有可能出現以下的程式碼。 直接在頁面上調用 $、React、ReactDOM,由於 jQuery、React、React-d...

2018-10-05 ‧ 由 TYSON 分享
DAY 6

Webpack 設定檔配置 Common / Dev / Prod

為了區分 develop、production 設定,我們將 Webpack 設定檔拆分為 webpack.common.js、webpack.dev.js、...

2018-10-06 ‧ 由 TYSON 分享
DAY 7

Babel 設定

關於 Babel 看一下 Babel 官網上的定義,馬上就能明白 Babel 的功用。 在 ES6 之後,ECMAScript 版本每年都會更新,2018 年...

2018-10-07 ‧ 由 TYSON 分享
DAY 8

頁面緩存設定

output filename 配置參數 [name] 文件檔名 [path] 文件路徑 [ext] 文件副檔名 [hash] 是 Webpa...

2018-10-08 ‧ 由 TYSON 分享
DAY 9

ASP.NET MVC 導入 SASS

專案使用 SCSS 寫法,我們之前用 Gulp 來 Compile,也使用過 ASP.NET MVC Web Compiler 來處理,後者的缺點是必須使用 V...

2018-10-09 ‧ 由 TYSON 分享
DAY 10

ASP.NET MVC 導入 PostCSS

關於 PostCSS PostCSS 是一個使用 JavaScript 轉換 CSS 的工具 PostCSS 是一套後處理器,將 CSS 解析為 AST...

2018-10-10 ‧ 由 TYSON 分享