webpack 是利用loader 來處理各種資源的，wepback的配置基本上就是為各種資原始檔，指定不同型別的loader。

　　1，處理css

　　最基本的css 處理loader 是css-loader , style-loader.  css-loader 處理的是css 中的@import 和url, 根據路徑(相對路徑)找到相應的資源，但它不處理具體的資源，比如，img, 是由file-loader或url-loader 來處理的，這個以後再說. style-loader則是把打包後的css檔案插入到html中，具體的方法是，它會生成一個內聯的style 標籤，然後把css注入到這個style標籤中，它實現了模組熱更新，修改css樣式的時候，頁面不會強制重新整理，就能看到變化。那就npm install css-loader  style-loader --save-dev 安裝它們。 安裝完成後，在webpack中進行配置。配置檔案中有一個module屬性，module 屬性下面有一個rules 屬性，它是一個數組，loaders 的配置寫在它的裡面，每一個配置項都是一個物件，指明要處理哪種檔案，使用哪一種loader, 最簡單的配置如下

const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,  // 正則表示式，指明要處理的檔案型別
                use: ['style-loader', 'css-loader']  // 處理資源所使用的loader, 要注意loader的順序，從右向左執行
            }
        ]
    },
    devServer: {
        contentBase:
 
'build', 
        proxy: {
            '/api': 'http://102.03.34.58/api'
        },
        port: 9000,  // 設定埠號
        stats: 'errors-only', // 只有產生錯誤的時候，才顯示錯誤資訊，日誌的輸出等級是error.
        overlay: true // 當有編譯錯誤的時候，在瀏覽器頁面上顯示。
    },
    plugins: [
        new htmlWebpackPlugin()
    ]
}

　　寫一點css樣式，看配置有沒有生效，在src 目錄下，新建一個css資料夾，裡面寫一個style.css檔案，隨便寫一點樣式，

body {
  background: blue;
}

　　然後在index.js 中引入import ‘./css/style.css’.

// 引入css 樣式
import './css/style.scss';

import component from './component';
document.body.appendChild(component())

　　npm run dev 啟動伺服器，可以看到頁面有了背景色，這時我們可以隨便更改body的背景色，頁面也會時時做出了變化，非常方便開發。

　　當然，你可能使用css 前處理器， less, sass stylus等， 這也簡單，安裝相應的loader 就可以了，

　　less: npm install less less-loader --save-dev,  

　　sass： npm install node-sass, sass-loader --save -dev,

　　stylus, npm install stylus, stylus-loader --save-dev,

　　然後在use中增加一條相應的loader

 rules: [
            {
                test: /\.css$/,  // 正則表示式，指明要處理的檔案型別
                use: ['style-loader', 'css-loader']  // 處理資源所使用的loader, 要注意loader的順序，從右向左執行
            },
            {
                test: /\.less$/, 
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.scss$/, 
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.styl$/, 
                use: ['style-loader', 'css-loader', 'stylus-loader']
            }
        ]

　　最後再來說一下PostCSS,  它的配置稍微麻煩一點，因為PostCSS是由外掛來起作用的，使用哪個功能，就要安裝哪個外掛，如果只安裝postcss-loader, 它並不起作用，這和babel-loader一樣， 比如要使用新增瀏覽器廠商字首的功能, 在安裝postcss, postcss-loader 後，還要安裝對應的外掛autoprefixer ,   npm install postcss, postcss-loader, autoprefixer --save-dev.  安裝完成後，就要進行配置。對於純css 來說，我們最先使用postcss-loader, 所以postcss-loader要放到最右邊，但是又不能只寫一個postcss-loader 放在那裡，因為它自己不起作用，需要對postcss-loader進行配置。配置的方式有兩種，一種是在webpack的配置檔案中，一個是單獨給postcss寫一個配置檔案。

　　如果在wepback的配置檔案中配置postcss-loader，那postcss-loader 就不能是一個字串了，要是一個物件， loader屬性 是我們指定的loader, options 就是我們指定的配置項，對於postcss-loader 來說，它的配置項是plugins, 使用到的外掛， 是一個函式，返回一個數組，陣列中就包括用到的外掛。

{
                test: /\.css$/,  
                use: ['style-loader', 'css-loader',
                    {   // 使用物件對postcss-loader進行配置，物件有兩個屬性loader, options 
                        // loader屬性就是指定使用的loader, options 就是該loader的配置項，也是一個物件
                        loader: 'postcss-loader', 
                        options: {
                            plugins: () => ([
                                require('autoprefixer')
                            ])
                        }
                    }
                ]  
            }

　　但是當我們使用很多外掛進行開發，這樣在配置檔案中進行配置就很麻煩了，也會導致配置檔案比較龐大，這時就要使用PostCSS配置檔案，它的配置檔案有很多格式，json, yml, js的都可以，有興趣的可以看一下官方文件。我在這裡就使用postcss.config.js. 在專案根目錄下建立一個postcss.config.js 檔案，它的格式如下，module-export 出一個帶有plugins屬性的物件。plugins屬性也是一個物件，屬性名就是使用的外掛的名稱，屬性值是一個物件，對這個外掛的配置。

module.exports = {
  plugins: {
    "autoprefixer": {
      browsers: [
          // 加這個後可以出現額外的相容性字首
          "> 0.01%"
      ]
    }
  }
}

　　使用配置檔案後，webpack的配置檔案還原到以前的狀態，

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

　　現在在style.css中給body, 新增box-sizing: border-box; 看一下效果。

body {
  background: blue;
  box-sizing: border-box;
}

　　開啟瀏覽器控制檯，可以看到添加了webkit- 的瀏覽器廠商字首。

　　當使用css 預處理的時候，它要放到前處理器loader 的後面, 也就是說，先使用前處理器loader, 再使用postcss-loader. 當然配置還是一樣的。以scss 為例

{
                test: /\.scss$/, 
                use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
}