loader 配置處理 .css 文件 .less文件 .scss文件

main.js

//使用 import 語法導入css樣式表

 import './css/index.css'

//注意：webpack默認只能打包處理js文件，沒法處理其餘的非js類型文件，若是要處理，須要手動安裝一寫合適的第三方 loader 加載器
//1.若是要打包處理css文件，須要安裝cnpm i style-loader css-loader -D
//2.打開webpack.config.js這個配置文件，在裏面新增一個配置節點，叫作module，它是一個對象，在這個module對象身上，有個rules屬性，這個rules屬性是個數組;這個數組中存放了全部對第三方文件的匹配和處理規則；

 

運行npm run dev 發現 src 下的 css 文件夾中的 .css  .less  .scss文件都沒法被webpack識別打包

.css

cnpm i style-loader css-loader -D

 .less

cnpm i less-loader -D
cnpm i less -D  //內部依賴，不須要放入匹配規則中

.scss

cnpm i sass-loader -D
cnpm i node-sass -D  //內部依賴，不須要放入匹配規則中

 

 

webpack.config.js

const path = require('path');

//這個配置文件，起始是一個JS文件，經過Node中的模塊操做，向外暴露了一個配置對象
module.exports = {
  entry: './src/main.js',     //入口，表示要使用webpack打包哪一個文件
  output: {
    filename: 'bundle.js',  //這裏是輸出文件的名稱
    path: path.resolve(__dirname, 'dist')   //指定打包好的文件輸出到了那個目錄中去
  },

  plugins:[],

  module:{//這個節點，用於配置全部第三方模塊加載器
    rules:[//全部第三方模塊的匹配規則
      { test:/\.css$/,use:['style-loader','css-loader']}, //配置處理.css文件的第三方loader規則

　　　　 { test:/\.less$/,use:['style-loader','css-loader','less-loader']}, //配置處理.css文件的第三方loader規則

　　　　 { test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}, //配置處理.css文件的第三方loader規則

    ]

  }
};

配置成功後，運行 npm run dev,頁面已經出現了樣式，此時說明 樣式文件打包成功了

 

 

注意：webpack4.0打包的樣式文件必須存在，不然配置完成以後會報錯