frontend-webpack-boilerplate
簡易的 webpack 5 專案起始範本，支援 SASS/PostCSS、Babel ES7、瀏覽器同步、程式碼檢查。輕鬆設定多項功能與開發工具。
frontend-webpack-boilerplate 是什麼？
簡易的 webpack 5 專案起始範本，支援 SASS/PostCSS、Babel ES7、瀏覽器同步、程式碼檢查。輕鬆設定多項功能與開發者友善工具。
frontend-webpack-boilerplate 概覽
這是什麼
一個簡單的 Webpack 5 專案起始範本，支援 SASS/PostCSS、Babel ES7、瀏覽器同步以及程式碼檢查。它旨在提供簡易的專案設定，並包含多種功能與開發者友善的工具。範本內含 JavaScript、SASS/PostCSS、HTML、圖片、影片和字型的示範檔案。採用 MIT 授權，為開放原始碼。
主要功能
- 範本本身零相依性 - 依環境（開發與生產）進行設定，包含 sourcemap、壓縮與瀏覽器同步 - 透過
browserslist設定瀏覽器支援，並使用autoprefixer與babel-preset-env - 生產環境的資產最佳化：程式碼壓縮、小檔案內嵌（inline）以及透過
imagemin進行圖片壓縮 - 原始碼語法檢查：SASS/PostCSS（stylelint）與 JavaScript（ESLint 搭配 Airbnb 風格） - 最新 Webpack 5、Babel 7 與 Dart Sass 編譯器 - 整合 Webpack Dev Server（自動重新載入）與 Webpack Bundle Analyzer（可視化套件大小）
使用情境
- 使用現代建置工具啟動新的前端專案 - 學習或快速原型化 Webpack 5 設定 - 作為建置與最佳化資產（CSS、JS、圖片、字型、HTML）的參考 - 設定具備程式碼檢查與瀏覽器同步的開發環境
快速開始
需求：Node.js >=22.15.0 與 npm。 安裝步驟： 1. 下載最新版本的發行壓縮檔。 2. 解壓縮至新目錄，並重新命名為你的專案名稱。 3. 執行以下指令安裝相依套件： sh npm ci 啟動開發伺服器（自動重新載入）： sh npm run dev 其他可用指令：
npm run build– 一次性開發建置 -npm run watch– 建置並監聽檔案變更 -npm run production– 生產環境最佳化建置 -npm run lint:sass– 檢查 SASS/PostCSS 語法 -npm run lint:js– 檢查 JavaScript 語法 -npm run stats– 執行套件分析器
授權與價格
採用 MIT 授權。此專案為開放原始碼，可免費使用。
內容整理自該專案公開的 README 與儲存庫資訊。
