一切皆模組

Webpack有一個不可說的優點，它把所有的檔案都當做模組處理，JavaScript程式碼，CSS和fonts以及圖片等等通過合適的loders都可以被處理。

CSS

webpack提供兩個工具樣式表，css-loader和style-loader，二者處理的任務不同，css-loader使你能夠使用類似@import和url(……)的方法實現require()的功能。style-loader將所有計算後的樣式加入頁面中，二者組合在一起使你能把樣式表嵌入webpack打包後的JS檔案中。

繼續上邊的例子安裝：

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

使用：

//使用
module.exports = {

   ...
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }
                ]
            }
        ]
    }
};
 

請注意這裡一個檔案引入多個loader的方法

我們這裡的例子中用到的webpack只有單一的入口，其它的模組需要通過import,require,url等與入口檔案建立其聯絡，為了讓webpack能夠找到”main.css“檔案,我們把它匯入到main.js中，如下：

通常情況下css檔案和js檔案會打包到同一個檔案中，並不會打包一個單獨的css檔案，不過通過合適的配置webpack也可以把css打包為單獨的檔案。

CSS module

在過去的一些年裡，JavaScript通過一些新的語言特性，更好的工具以及更好的實踐方法（比如說模組化）發展得非常迅速。模組使得開發者把複雜的程式碼轉化為小的，乾淨的，依賴宣告明確的單元，配合優化工具，依賴管理和載入管理可以自動完成。

不過前端的另外一部分，CSS發展就相對慢一些，大多的樣式表卻依舊巨大且充滿了全域性類名，維護和修改都非常困難。

被稱為CSS modules的技術意在把JS的模組化思想帶入CSS中來，通過CSS模組，所有的類名，動畫名預設都只作用於當前模組。Webpack對CSS模組化提供了非常好的支援，只需要在CSS loader中進行簡單配置即可，然後就可以直接把CSS的類名傳遞到元件的程式碼中，這樣做有效避免了全域性汙染。具體的程式碼如下：

module.exports = {

    ...

    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true, // 指定啟用css modules
                            localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的類名格式
                        }
                    }
                ]
            }
        ]
    }
};

我們在app資料夾下建立一個Greeter.css檔案來進行一下測試

/* Greeter.css */
.root {
  background-color: #eee;
  padding: 10px;
  border: 3px solid #ccc;
}

匯入.root到Greeter.js

import React, {Component} from 'react'; import config from './config.json'; import styles from './Greeter.css';//匯入

class Greeter extends Component{   render() {     return (       <div className={styles.root}> //使用cssModule新增類名的方法         {config.greetText}       </div>     );   } }

export default Greeter

CSS前處理器

Sass和Less之類的前處理器就是對原生css的擴充套件，它們允許你使用類似於variables，nesting，mixins，inheritance等不存在於css中的特性來寫CSS，CSS前處理器可以將這些特殊的語句轉化為瀏覽器可以識別的CSS語句，

你現在可能都已經熟悉了，在webpack裡使用相關loaders進行配置就可以使用了，以下是常用的CSS 處理loaders:

Less Loader

Sass Loader

Stylus Loader

不過其實也存在一個css的CSS的處理平臺-PostCSS，它可以幫助你的CSS實現更多的功能。

舉例來說如何使用PostCSS，我們使用PostCSS來為CSS程式碼自動新增適應不同瀏覽器的CSS字首。

安裝postcss-loader 和autoprefixer(自動新增字首的外掛)

npm install --save-dev postcss-loader autoprefixer

接下來，在webpack配置檔案中新增postcss-loader，在根目錄新建postcss.config.js,重新使用npm start打包時，你寫的css會自動根據Can i use裡面的資料新增不同的字首。

本文已經談論了處理JS的Babel和處理CSS的PostCSS的基本用法，它們其實也是兩個單獨的平臺，配合webpack可以很好的發揮它們的作用。