舉例：

如果希望在.html文件中使用style.css樣式，我們以前只學習過一種方式：直接在.html中通過link的方式來引入 ，這是傳統的做法，在webpack語境下，我們將選擇一條不同的道路：在js文件中引入了css。

在入口文件中引入css會報錯，這時候我們使用loader即可解決(它認為是在入口文件引入一個模塊。(在webpack中一切皆模塊))

*********************************************

步驟

在css中引入另一個css

然后在js(入口文件)中引入會報錯

安裝loader

npm i css-loader -D

開始引入：

打包成功

再次打包

它不會報錯，但是，頁面上也并沒有出現樣式的效果。檢查打包之后得到的目標代碼.js文件，發現其包含css代碼。但是，它為什么不會顯示在頁面上呢？如果我們希望樣式生效，最終在.html文件中有兩種情況：

①有style標簽

②有link標簽

而css-loader只是允許你在.js中通過import來引入.css，如果你希望引入的css代碼最終以style標簽的方式插入到html頁面中，則還需要安裝一個loader:style-loader

安裝并使用style-loader

npm i style-loader -D

最終結果：

html + js 可以有樣式

他還會告訴你樣式是在那個文件中出現的

這個js文件會自動給你加style(前邊入口處的代碼)

重點：注意這里容易報錯，看仔細

引入less(記得css的也同樣要引入)

在入口文件中引入less

一打包就錯誤

裝包

npm i less-loader less -D

寫配置

自動添加css樣式前綴(寫css樣式會有兼容性問題，去看看)

https://www.caniuse.com/flexbox

可以在這個網站查兼容性的情況

紅色不能用

灰色要加前綴

全背下來或者去查太慢了，所以我們可以使用loader來安裝以來步驟

安裝依賴

在modules中補充設置postcss-loader

單獨設置postcss的autoprefixer插件

npm i postcss postcss-loader autoprefixer -D

內容不用記(官網固定寫法){

test: /\.less$/,

// 匹配成功后(從后向前；從右到左)

// 1. 先用less-loader去加載.less文件,轉成css

// 2. 用postcss-loader配合autoprofixer加瀏覽器前綴

// 3. 先用css-loader去加載css文件

// 4. 再用style-loader把樣式以style標簽的方式嵌入到html中

use:['style-loader', 'css-loader', 'postcss-loader',? 'less-loader']

}

在less中寫兼容性的樣式后

會自動給你加前綴

如果只想兼容ie10

注釋掉其他的，只管ie10

6、file-loader-處理圖片文件

解決方法：

build里多了兩個文件

覺得這樣不好，再添加一局代碼

這樣寫，打包之后打開之后不顯示

要注意：此時打包得到的圖片的路徑可能有問題，需要你把src下的index.html手動復制一份到目標文件夾，并同時修改引用的css，才能正確看到圖片。(后面會改成自動去復制)

7、文件指紋

文件名_八位hash值加后綴名

8、url-loader處理圖片

、

設置小于3k的轉成base64，所以當我們發送請求的時候不需要在請求這個小文件，因為它已經被轉成base64字節放到js里

9、使用babel-loader處理js降級問題

總結

以上是生活随笔為你收集整理的html loader的作用,webpack认识loader的作用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。