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