在main.js中直接加require(‘./css/base.css’)，然后打包會報錯，是因為webpack不支持css文件類型，需要依賴loader。

• css-loader 處理css中路徑引用等問題
• style-loader 動態把樣式寫入css
• sass-loader scss編譯器
• less-loader less編譯器
• postcss-loader scss再處理

一、安裝css-loader,style-loader

npm install css-loader style-loader --save-dev

二、使用loader

1.在引入css文件中

require(‘style-loader!css-loader!./css/base.css’);//從右到左執行，必須注意順序

2.在命令行

//給css綁定 webpack --mode production --module-bind "css=style-loader!css-loader"

注：必須是雙引號，單引號會報錯。–module-bind是為loader綁定一個擴展

3.在配置webpack

在文件webpack.config.js中配置

module:{rules:[{test:/\.css$/,use:['style-loader','css-loader']}]}

總結loader的7種用法：

use:['style-loader','css-loader'] use:[{loader:'style-loader'},{loader:'css-loader'}] loader:['style-loader','css-loader'] loader: 'style-loader!css-loader' loaders:['style-loader','css-loader'], loaders:[{loader:'style-loader'},{loader:'css-loader'}], loaders: 'style-loader!css-loader',

webpack 根據正則表達式，來確定應該查找哪些文件，并將其提供給指定的 loader。在這種情況下，所有以 .css 結尾的文件，都將被提供給 style-loader 和 css-loader。

Rule.loaders 是 Rule.use 的別名。由于需要支持 Rule.use，此選項已廢棄。

總結

以上是生活随笔為你收集整理的webpack4.x Loaders的全部內容，希望文章能夠幫你解決所遇到的問題。

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