vue-style-loader源碼初步分析

背景：

　　首先聲明一下，我只是個菜雞，爲了解決問題纔去看的源碼，解決完問題以後也就沒有興趣看其餘部分代碼了，因此這篇文章是一次很低層次的解讀，角度也至關片面，想必會有不少噴點吧。

　　事情的通過是這樣，今年十月底的時候對公司前端產品的構建工具作了一次升級，從webpack1升級到了webpack4，如今已經投入正式環境，寫這篇文章的時候我在外邊出差，忙的時候997，閒的時候也997，這會兒就有點閒得慌，因此就想着把以前的操做覆盤總結一遍，這個過程其實很是順利，沒遇到過幾回報錯，打開build出來的文件以後卻讓我莫名的詫異，個人樣式並無掛載到dom元素中，但構建過程當中並無遇到過報錯。我這邊使用的前端框架是vue，因爲解析vue文件樣式代碼的過程當中須要用到的loader有vue-loader css-loader（或者其餘css預處理語言的loader）、vue-style-loader，因而我就把問題定位到了這幾個loader上面。由於以前有成功過的案例，在確認過個人配置跟以前寫的配置同樣以後，我對使用的這些依賴產生了懷疑，可是我實在是很好奇究竟是哪一個流程中除了問題，因此就對構建流程中這部分的細節進行了一些瞭解。

　　我起了一個新的入口文件和父組件，去除無關的代碼來複現這個問題。

　　很少說，直接多圖警告

事 故 現 場

　　執行完打包命令以後，按理來講打開dist目錄中的index.html頁面中應該就會出現一個傻不愣登的正方形色塊好比：

　　但你我都知道若是這麼順利的話就不會有這篇水文存在了，實際上打開是這樣的：

　　我以前大概瞭解過vue-style-loader是在style-loader的基礎之上寫出來的，主要功能跟style-loader相似，只是多了一些額外的特性，因此我想切換成style-loader試一下,而後愕然發現竟然正常了，因而推測問題出在vue-style-loader身上，就在去看依賴的源碼並作了一些嘗試：

 

 

 

 

 

 

　　但問題來了：

　　我不可能真的去改node_modules中的vue-style-loader，由於每換一個環境，就須要改一次源碼這確定是不現實的，正確的解決辦法必定不在這裏。

我開始思考vue-style-loader與style-loader的區別，爲何style-loader就能順利處理esModule呢，而後我在style-loader的代碼中找到了線索，源碼中有個名爲options的json文件，描述了這個loader的配置項及其含義，其中有一個esModule屬性：

 

　　因而我去github上看了style-loader的發佈歷史，最近的一個版本：

 

　　從options中的附帶連接也瞭解到瞭如今的css-loader也有個配置屬性esModule，從css-loader@3.4.0(2019-12-17)開始，css-loader支持esModule屬性，@4.0.0(2020-07-26)開始這個屬性的默認值爲true。

終於破案了，其實是由於我覆盤的時候，安裝的style-loader、vue-style-loader、css-loader沒有指定版本，默認安裝了最新的依賴，css-loader、style-loader都把配置項的esModule默認值設爲了true，而vue-style-loader最後一次更新已是快三年前了，這期間的改動沒有同步，因此vue-style-loader是不處理esModule的，因此這個問題的解決方法就出來了，只須要把css-loader的options添加上esModule:false就可以解決問題。