>[success] # 淺解loader [官網對laoders 介紹](https://webpack.js.org/concepts/#loaders) 1. 使用參考 `了解配置 -- webpack.config.js` 章節，除了這個章節講述的**配置方式**，loder 還有另外兩種使用形式 **內聯方式，CLI方式（webpack5中不再使用）** * **內聯方式**，當下載了對應 loader 包后，不在配置文件的module配置指定解析模塊，但想讓找到對應loader 即可在引入的樣式前加上使用的loader，并且使用!分割`import 'css-loader!./index.css'` 實際不會用 * **CLI方式**， **webpack5的文檔中已經沒有了**`--module-bind` 實際不會用 >[info] ## 三類 loader 1. **編譯轉換類** - 將資源模塊轉換為js代碼，以JS形式工作的模塊。如：`css-loader` 2. **文件操作類** - 將資源模塊拷貝到輸出目錄，同時將文件的訪問路徑向外導出 如：`file-loader` 3. **代碼檢查類** - 對加載的資源文件（一般是代碼）進行校驗的加載器，目的統一代碼風格，提高代碼質量，一般不會修改生產環境的代碼 >[info] ## 關于為什么需要loader 1. webpack 是否只能將**js作為入口文件**，如果嘗試將**css文件作為入口文件運行**webpack 運行后會產生報錯，錯誤信息大體的意思是說，**在解析模塊過程中遇到了非法字符**  進一步通過報錯提供的網址 https://webpack.js.org/concepts/#loaders 中描述**webpack 只能理解 JavaScript 和 JSON 文件，這是 webpack 開箱可用的自帶能力**。但是此處我們讓 **Webpack 處理的是 CSS 代碼，而 CSS 代碼是不符合 JavaScript 語法的，所以自然會報出模塊解析錯誤** >[danger] ##### 證明loader 是的對語法而不是文件 1. 雖然官方文檔已經明確說明webpack 默認解析的js 和json 這兩種語法，但如何驗證，現在將**剛才的css文件內容里面寫的是js代碼在運行**，可以發現運行**成功并且沒有報錯也成功打包完成** 在一個 **src/index.css** 文件里編寫一段js代碼`console.log('css 文件寫的js 代碼')` >[danger] ##### laoder 本質 1. 當用一個css 文件做處理的時候，里面是正常的css代碼的時候發現上面的報錯信息 **You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. （我們需要用適當的加載器來處理這種文件類型，而當前并沒有配置一個可以用來處理此文件的加載器）** 2.Webpack 是用 Loader（加載器）來處理每個模塊的，而內部默認的Loader 只能處理 JS 模塊，**如果需要加載其他類型的模塊就需要配置不同的 Loader**。  3. webpack 會根據配置將一個文件作為打包的入口（一般為js), 根據該入口文件的導入語句解析**推斷該文件所依賴的資源模塊**，**去解析每個資源模塊對應的依賴，最后形成的項目關系之間的依賴樹**，webpack會遞歸這個依賴樹，找到每個節點所**對應的資源文件**，根據配置文件當中的**rules屬性去找到模塊文件所對應的(loader)加載器**，然后加載器加載該模塊，將加載器的結果放入bundle.js即打包結果當中，從而實現整個項目的打  4. **Loader機制是webpack的核心** >[danger] ##### 常見的loader | 名稱 | 連接 | | --- | --- | | file-loader | [https://webpack.js.org/loaders/file-loader](https://webpack.js.org/loaders/file-loader) | | url-loader | [https://webpack.js.org/loaders/url-loader](https://webpack.js.org/loaders/url-loader) | | babel-loader | [https://webpack.js.org/loaders/babel-loader](https://webpack.js.org/loaders/babel-loader) | | style-loader | [https://webpack.js.org/loaders/style-loader](https://webpack.js.org/loaders/style-loader) | | css-loader | [https://webpack.js.org/loaders/css-loader](https://webpack.js.org/loaders/css-loader) | | sass-loader | [https://webpack.js.org/loaders/sass-loader](https://webpack.js.org/loaders/sass-loader) | | postcss-loader | [https://webpack.js.org/loaders/postcss-loader](https://webpack.js.org/loaders/postcss-loader) | | eslint-loader | [https://github.com/webpack-contrib/eslint-loader](https://github.com/webpack-contrib/eslint-loader) | | vue-loader | [https://github.com/vuejs/vue-loader](https://github.com/vuejs/vue-loader) |