webpack 3.X學習之CSS處理

Loaders

Loaders是Webpack最重要的功能之一，他也是Webpack如此盛行的緣由。經過使用不一樣的Loader，Webpack能夠的腳本和工具，從而對不一樣的文件格式進行特定處理。

Loader的配置模型：

• test：用於匹配處理文件的擴展名的表達式，這個選項是必須進行配置的；
• use：loader名稱，就是你要使用模塊的名稱，這個選項也必須進行配置，不然報錯；
• include/exclude:手動添加必須處理的文件（文件夾）或屏蔽不須要處理的文件（文件夾）（可選）；
• query：爲loaders提供額外的設置選項（可選）。

打包CSS

首先，在src目錄下創建css文件夾，和index.css文件，並編寫以下代碼：

body{
    background: burlywood;
    color:white;
    font-size:30px;
}

創建好後，須要引入到入口文件中，才能夠打包。在entery.js的首行加入代碼：

import css from './css/index.css';

接下來咱們就須要解析css文件，經過loader，下面到咱們下載style-loader和css-loader：

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

配置loader：

第一種方法：

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

第二種方法：

module:{
    rules:[
        {
            test：/\.css$/,
            loader:['style-loader','css-loader']
        }
    ]
}

第三種方法:

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

這樣咱們就配置好了，使用命令webpack打包，就能夠看的樣式生效；

分離CSS

目前，打包後的文件中，css是打包在js代碼裏面的，這樣不便於之後的維護，因此須要吧CSS從js中分離出來，咱們須要使用插件Extract Text Plugin

安裝：

npm install --save-dev extract-text-webpack-plugin

在webpack.config.js中引入

const ExtractTextPlugin = require('extract-text-webpack-plugin');

在Plugins中配置:

new ExtractTextPlugin('css/index.css');
//css/index.css是分離後的路徑位置

修改Loader配置：

module:{
    rules:[
        {
            test:/\.css$/,
            use:ExtractTextPlugin.extract({
                fallback:"style-loader",
                use:"css-loader"
            })
        }
    ]
}

Less打包和分離

Less做爲目前很火的CSS預處理語言，它擴展了 CSS 語言，增長了變量、Mixin、函數等特性，使 CSS 更易維護和擴展；

安裝：

npm install --save-dev less less-loader

在webpack.config.js中配置Loader:

module:{
    rules:[
        {
            test:/\.less$/,
            use:ExtractTextPlugin.extract({
                fallback:"style-loader",
                use:[{
                    loader:"css-loader"
                },{
                    loader:"less-loader"
                }]
            })
        }
    ]
}

Sass打包和分離

Sass的打包和分離和less的相似，首先下載安裝Sass所支持的服務與loader

安裝：

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

在webpack.config.js中配置Loader:

module:{
    rules:[
        {
            test:/\.less$/,
            use:ExtractTextPlugin.extract({
                fallback:"style-loader",
                use:[{
                    loader:"css-loader"
                },{
                    loader:"sass-loader"
                }]
            })
        }
    ]
}

css自動加載前綴

CSS3是目前做爲一個前端必需要掌握的技能，可是因爲如今好多瀏覽器仍是不兼容CSS3，因此前端須要多寫很醜很難看的前綴代碼；之前都是邊查Can I Use ，邊添加，這樣很麻煩，如今配置一個插件postcss就能夠搞定；

PostCSS是一個CSS的處理平臺，它能夠幫助你的CSS實現更多的功能，可是今天咱們就經過其中的一個加前綴的功能，初步瞭解一下PostCSS。

安裝：

npm install --save-dev postcss-loader autoprefixer

在根目錄下，創建一個postcss.config.js文件：

module.exports = {
    plugins:[
        require('autoprefixer')
    ]
}

這就是對postCSS一個簡單的配置，引入了autoprefixer插件。讓postCSS擁有添加前綴的能力，它會根據 can i use 來增長相應的css3屬性前綴。

在webpack.config.js中配置Loader:

{
    test: /\.css$/,
    use: extractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
            { loader: 'css-loader', 
                options: { importLoaders: 1 } 
            },
            'postcss-loader'
        ]
    })

}

消除多餘CSS

隨着項目的進展，編寫的CSS會愈來愈多，有時候需求更改，帶來DOM結構的更改，形成CSS的冗餘，因此爲了減小CSS文件的體積，須要消除冗餘的CSS；使用PurifyCSS能夠大大減小CSS冗餘；這個插件必須配合extract-text-webpack-plugin來使用；

安裝：

npm install --save-dev purifycss-webpack purify-css

引入glob：

由於須要同步檢查HTML模板，因此須要引入node的glob對象使用，在webpack.config.js文件頭部引入

const glob = require('glob');

引入purifycss-webpack:

const PurifyCssPlugin = require('purifycss-webpack');

配置plugins：

plugins:[
    new PurifyCssPlugin({
        paths:glob.sync(path.join(__dirname,'src/*.html'))
    })
]

參考地址：

• https://github.com/zhuangZhou/webpack_demo
• http://jspang.com/2017/09/16/webpack3-2/#15webpackbabel