從 0 配置 webpack（三）

webpack 的 loader 和 plugin 太多了，在專案開發過程中可以根據功能需要去 webpack 官網搜尋配置。

這裡只介紹自己目前用到的，以後會繼續補充。

scss 是 sass 語言的另個語法，詳細可見 sass簡介

引入 scss 的方法詳細見官網 sass-loader 或 github

sass-loader 的內部實現肯定依賴 sass ，所以安裝 sass-loader 的同時也要安裝 sass

安裝 sass 和 sass-loader

yarn add sass-loader sass --dev // 使用預設配置就行，當前預設配置就是 dart-sass yarn add sass-loader dart-sass --dev // 使用 dart-sass 時要有一些配置

yarn add sass-loader node-sass --dev //不推薦使用 node-sass，會有一些問題

使用 sass 的配置資訊：

module.exports = ,
],},
};

使用 dart-sass 的配置資訊，node-sass 同理

module: ,
},],
},],

less-loader 的內部實現肯定依賴 less ，所以安裝 less-loader 的同時也要安裝 less

安裝 less 和 less-loader

yarn add less less-loader --dev

配置資訊

module: 
],}

安裝 stylus 和 stylus-loader

yarn add stylus stylus-loader --dev

配置資訊

module: 
],}

通過上述三種 css 語言的變種的引入可以看出，都是需要先將其轉化為 css，再由 css 轉化為或抽離成 css 檔案。

由於我們使用 webpack 開發專案時，**編輯目錄和執行**目錄是兩個完全獨立的資料夾，因此，在使用資源時，不能直接使用相對路徑，會出錯。需要對進行轉化，得到其在打包後的真正相對路徑和帶有 hash 的檔名。

file-loader 的作用就是將檔案變成檔案路徑。

安裝 file-loader

yarn add file-loader --dev

配置資訊

module: ,
]}

在 webpack 中，模組的匯入匯出使用的是 import 和 export。但是如果將所有的模組在一開始就全都 import 進來，會大大降級頁面的載入速度。因此懶載入就是在模組需要的時候才載入出來，使用的是 import()函式。

import()函式接收乙個載入模組的路徑，返回乙個 promise 物件。

lazy.js

export default function ()

index.js

button.onclick = ()=>)
}