參考文章
💓[week 13] 前端工具之二 - CSS 預處理器、Babel
💓[week 13] 前端工具之三 - gulp、webpack
👄SCSS
如果想要查看完整的檔案內容，可以將該提交中的檔案名稱指定給 git show 命令。
在此情況下，檔案名稱是 public/index.html。
步驟 1: 安裝 SCSS 編譯器
npm install sass
步驟 2: 撰寫 SCSS 文件
步驟 3: 編譯 SCSS 文件為 CSS
npx sass input.scss output.css
sass --style=compressed mais.scss main.css
sass --style=compressed mais.scss main.css
步驟 4: 在 HTML 文件中引入 CSS 文件
👄Webpack
Webpack 是一個非常強大且廣泛使用的前端打包工具，具有許多常用的功能。以下是一些 Webpack 常見的功能和用途：
模組打包： Webpack 可以將多個前端資源（如 JavaScript、CSS、圖片等）視為模組，並將其打包成較小、更有效的 bundle 檔案，以加速網站載入速度。
載入器 (Loaders)： 載入器允許 Webpack 處理非 JavaScript 檔案。例如，使用
babel-loader可以將 ES6/ES7 JavaScript 轉換為瀏覽器支持的 JavaScript，使用sass-loader可以將 SCSS/Sass 檔案轉換為 CSS。插件 (Plugins)： Webpack 的插件系統提供了許多功能強大的插件，如
HtmlWebpackPlugin可以自動生成 HTML 文件，MiniCssExtractPlugin可以將 CSS 提取成單獨的文件，CleanWebpackPlugin可以在每次建構前清理輸出目錄等。熱模組替換 (Hot Module Replacement, HMR)： 在開發模式下，Webpack 提供 HMR 功能，可以實現在應用程式運行時，無需刷新整個頁面，即時更新修改過的模組，加快開發速度。
代碼分割 (Code Splitting)： Webpack 可以將程式碼分割成更小的塊，使得網站在運行時只載入必要的部分，減少初始加載時間。
靜態資源管理： Webpack 可以處理靜態資源，如圖片、字型等，並將它們優化、壓縮，或將小圖片轉換為 Data URLs。
多環境配置： 可以根據不同環境（開發、生產等）提供不同的設定，如使用不同的插件、載入器、變數替換等。
代碼壓縮和優化： 在生產模式下，Webpack 可以壓縮 JavaScript、CSS 和其他資源，並且可以進行樹搬移動、死代碼消除等優化操作。
擴展性和自定義性： Webpack 可以通過配置文件進行高度定制，以滿足各種特定的項目需求，並支持許多自定義插件和載入器。
👉運行 Webpack 打包：
npx webpack --mode development
npx webpack --mode production
--mode 它是用來指定打包模式的一個選項。Webpack 支援不同的模式，包括 development 和 production。
--mode development：這個選項告訴 Webpack 以開發模式進行打包，生成的 bundle 將保留原始的程式碼結構、不進行壓縮和優化等操作，方便開發者進行調試和開發。
--mode production：這個選項告訴 Webpack 以生產模式進行打包，生成的 bundle 將進行壓縮、優化等操作，以減少檔案大小並提升效能。
👄Webpack 和SCSS同時結合
module: { rules: [ { test: /\.scss$/, // 匹配 .scss 檔案 use: [ 'style-loader', // 將編譯後的 CSS 以 <style> 插入到 HTML 文件中 'css-loader', // 解析 CSS 檔案後，將其轉換為 CommonJS 模塊 'sass-loader' // 將 SCSS 轉換為 CSS ] } ] },
沒有留言:
張貼留言
喜歡我的文章嗎? 喜歡的話可以留言回應我喔! ^^