雖然webpack不能直接打包css檔案，但是可以藉助於各種各樣的Loader將webpack不能識別的檔案轉換成它能識別的格式；

需要在根目錄的package.json.js檔案中進行配置：

整體配置為：

const { resolve } = require('path')

module.exports= {
  entry: './src/index.js',
   //輸出:這是一個物件，裡面有兩個東西。filename表示輸出的檔名,path表示輸出的路徑,寫路徑的時候通常會寫一個絕對路徑，避免出錯。絕對路徑會引入一個nodejs的path模組
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules:[ 
      {
      //詳細loader配置
        //匹配哪些檔案
        test: /\.css$/,
        //處理這些檔案
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    //詳細plugins配置
  ],
  mode: 'development',
  //mode: 'production'
 }
 

首先， webpack.json.js為webpack的配置檔案。作用為：指示webpack幹哪些活(當執行webpack指令時，要載入哪些配置)；

所有構建工具都是基於node.js平臺執行的，模組化預設採用commonjs。可以看到commonjs會匯出一個物件，在該物件中寫webpack的配置：

1.入口起點

  entry: './src/index.js'

表示打包的入口檔案為src目錄下的index.js檔案；

2.輸出

  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
   }
 

這是一個物件，其中：

• filename表示輸出的檔名；

• path表示輸出的路徑；

• 寫路徑的時候為了避免出錯，通常會寫一個絕對路徑。需要引入一個nodejs的模組path模組：

  const { resolve } = require('path')
  

  其中的resolve是用來拼接絕對路徑的方法，格式為：

   path: resolve(__dirname, 'build')
  

  傳入兩個引數：__dirname和當前的build目錄；其中__dirname是nodejs的變數，它代表當前檔案（指webpack.config.js）的目錄的絕對路徑：

• 該絕對路徑就是03-打包樣式資源，也就是說__dirname
  的值就是03-打包樣式資源，拼接上build，再加上第一個引數filename指明的built.js一起表示，打包後輸出到build目錄下的built.js檔案中；

3.Loader配置

module: {
  rules: {
  	//詳細loader配置
  }
}

4.外掛（plugins）

  plugins: [
    //詳細plugins配置
  ],

5.模式

  mode: 'development',
  //mode: 'production'

開發模式development和生產模式production兩種模式選一種，不能同時寫；

6.打包樣式資源

可以使用css-loader來翻譯css檔案：

module: {
    rules: [ 
        {
            //詳細loader配置
            //使用正則表示式指定匹配哪些檔案
            test: /\.css$/,//該正則表示式表明，匹配以css結尾的檔案，\為轉義符
            //通過test的正則表示式匹配了檔案後，這裡指定使用哪些loader進行處理
            use: [
                //需要使用兩個loader
                //作用：建立style標籤，將js中的樣式資源插入進去，新增到head中生效
                'style-loader',
                //將css檔案轉換成一個commonjs模組並載入到js中，裡面內容是樣式字串
                'css-loader'
            ]       
        }
    ]
}

注意：rules屬性是一個數組，裡面的每一個元素都為物件，每個物件匹配並處理一類檔案。並且物件中的use屬性也是一個數組，其中loader的執行順序為：從右到左，從下到上依次執行。為了不用每次都安裝同樣的依賴檔案包，可以在根目錄執行下列指令安裝這些包，因為子目錄中找不到包會依次往根目錄找：

npm init //生成package.json
npm i webpack webpack-cli -D //下載webpack包，-D是--save-dev的縮寫，表示是開發時依賴
npm i css-loader style-loader -D //下載兩個loader，都是開發時依賴

進入03-打包樣式資源目錄，執行webpack進行打包：

開啟打包生成的built.js，可以看到index.css被成功打包了：

在build目錄下新建index.html引入生成的打包檔案built.js：

<script src="./built.js"></script>

隨後使用瀏覽器開啟該檔案，發現樣式發生了變化，原始碼多了style標籤

這便是style-loader的作用。

注意：不同型別的檔案要配置不同的loader來處理；比如為了處理less檔案，需要webpack.config.js中的rules陣列中再增添一個物件：

  module: {
    rules:[ 
      //匹配並處理css檔案
      {
        test: /\.css$/,
        //處理這些檔案
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      //匹配並處理less檔案
      {
       test: /\.less$/,
       use: [
         //以style標籤的形式在head標籤中插入樣式
         'style-loader',
         //將css檔案裝換為js形式
         'css-loader',
         //將less檔案編譯成css檔案
         'less-loader'
       ] 
      }
    ]
  }

可以看到處理less檔案需要三個loader，注意loader執行的順序為由下往上，由右往左：

• less-loader：將less檔案編譯成css檔案；
• css-loader：將css檔案內容整合到js中；
• style-loader：從js中找到這些css程式碼，將它傳入style標籤，插入head標籤中；

所以處理less檔案需要使用三個loader，注意：使用loader之前要先進行下載：

npm i less less-loader -D //全域性安裝less和less-loader

注意：最好統一在根目錄下載包，這樣其他子目錄向上查詢時都能找到相應的包，避免重複下載；

安裝完依賴包，並且正確配置package.config.js之後，執行webpack指令，就可以成功打包less檔案了：