注意：webpack默認(rèn)只能打包處理JS類型的文件，無法處理非JS類型文件 如果要處理 非JS類型文件，需手動安裝合理的 第三方 loader加載器

一纵装、安裝loader操作

1经柴、如果需要打包處理 css文件猴娩，需手動安裝

cnmp i style-loader css-loader -D

2抠藕、打開webpack.config.js這個配置文件弃鸦，在里邊新增加一些配置節(jié)點，叫做module幢痘，它是一個對象，在這個對象身上家破，有一個rules屬性颜说，這個rules屬性是一個數(shù)組，在這個數(shù)組中汰聋，存放了第三方文件的匹配和處理規(guī)則

module: {
  rules: [
    {test: '/.\css$/',use: ['style-loader','css-loader']} //這是配置處理.css文件的第三方loader規(guī)則门粪，處理的順序是從后往前調(diào)用
  ]
}

注意：webpack 處理第三方文件類型的過程：
1、發(fā)現(xiàn)這個 要處理的文件不是 JS文件烹困，然后就去 配 置文件中玄妈，查找有沒有對應(yīng)的 第三方 loader 規(guī)則。
2、如果能找到對應(yīng)的規(guī)則拟蜻，就會調(diào)用 對應(yīng)的loader處理這種文件類型绎签。
3、在調(diào)用loader的時候酝锅，是從后往前調(diào)用的
4诡必、當(dāng)webpack 拿到配置對象后，就拿到了配置對象中搔扁，指定的 入口和出口爸舒，然后進(jìn)行打包構(gòu)建

二、配置處理less稿蹲、sass文件的loader

1扭勉、在css文件中新建一個less文件，在main.js中引入

import './css/index.less';

2苛聘、安裝less和less-loader涂炎，sass-loader和node-sass

cnpm install less -D
cnpm install less-loader@4.1.0 -D
cnpm install sass-loader@7.0.1 -D
cnpm install node-sass -D  

注意：這里需要注意一下，有可能最后打包時候會出現(xiàn)報錯焰盗，這時可以降低一個less-loader的版本號@4.1.0
報錯信息：

image.png

module: {
  rules: [ //這個rules里的配置可以寫在和上邊配置css的寫在一起
    { test: /\.less$/, use: ['style-loader','css-loader','less-loader']},  // 配置處理 .less 文件的第三方loader 規(guī)則
    { test: /\.sass$/, use: ['style-loader','css-loader','sass-loader']}  // 配置處理 .scss 文件的第三方loader 規(guī)則
  ]
}

三、配置處理url-loader(圖片)

1熬拒、在css文件中引入圖片路徑
??：

.box{
  width: 200px;
  height: 150px;
  background: url('../images/老李.jpg');
  background-size: cover;
}

2爷光、安裝url-loader和file-loader文件

cnpm install/i url-loader file-loader -D //因為file-loader是url-loader內(nèi)部依賴，所以配置文件中不用配置

3澎粟、在webpack.config.js中配置處理

module: {
  rules: [
    { test: /\.(jpg|jpeg|png|gif|bmp)$/, use: ['url-loader?limit=number']   // limit 給定的值蛀序，是圖片的大小，單位是 byte活烙， 如果我們引用的圖片徐裸， 大于或等于limit值，則不會被轉(zhuǎn)為base64格式啸盏，如果小于重贺，圖片則被轉(zhuǎn)為base64的字符串值
  ]
}
//當(dāng)引入不同文件中相同名字的圖片時，webpack打包的時候回懦，會默認(rèn)覆蓋气笙，顯示幾張相同的圖片
module: {
  rules: [
    { test: /\.(jpg|jpeg|png|gif|bmp)$/, use: ['url-loader?limit=number&[hash:8]-name=[name].[ext]']   // limit 給定的值，是圖片的大小怯晕，單位是 byte潜圃， 如果我們引用的圖片， 大于或等于limit值舟茶，則不會被轉(zhuǎn)為base64格式谭期，如果小于堵第，圖片則被轉(zhuǎn)為base64的字符串值
  ]
}

limit=number&[hash:8]-name=[name].[ext]解釋
number:圖片的大小，字節(jié)數(shù)值隧出，1kb = 1024字節(jié)
[hash:8]-name=[name].[ext]：為了解決不同目錄中踏志，有相同名字的圖片正常顯示