Webpack進階第五節

一切皆模塊

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可以很好的發揮它們的作用。