什么是Loader？

webpack通過擴展對應的loader以支持更多文件的轉化，如scss，less轉換成css；ES6轉換為ES5代碼等。大部分loader可以在webpack官網找到，并學習對應的用法。

loader的使用過程

1. 通過npm安裝需要使用的loader

2.在webpack.config.js中的module關鍵字下配置

1.利用css-loader和style-loader給css文件打包?

項目中新建一個css文件夾，文件夾內新建normal.css文件：

body{
  background-color: aqua;
}

在webpack官網查詢styling相關的loader并下載

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

在webpack.config.js文件進行module配置

const path = require('path') //node包里找路徑

module.exports = {
  entry:'./src/main.js',
  output:{
    path:path.resolve(__dirname, 'dist'), //動態獲取絕對路徑
    filename:'bundle.js', //打包后的文件
  },
  module: {
    rules: [
      {
        test: /\.css$/i, //正則表達式查詢所有css文件
        use: ["style-loader", "css-loader"], //讀取從右往左，順序顛倒打包會報錯
        //css-loader只負責將css文件進行加載
        //style-loader負責渲染
      },
    ],
  },
}

終端使用命令npm run build進行打包，打包成功后可以看到html的body元素顏色被渲染

*踩坑

如果loader的下載版本過高時會出現如下報錯：

此時降低css-loader與style-loader的版本等級即可打包成功。