webpack工程化04(css处理)

一.css处理

之前讲过，webpack只能打包js文件，处理其他文件需要借助loader和插件，所以今天来将一下如何处理css。

处理css需要使用两个loader，一个是style-loader（主要的功能是生产一个style标签，嵌入html中），一个是css-loader（主要的共功能是处理css，使js中可以识别css）

我们先来看一个demo。

目录结构

//base.css
body {
    background: red;
}

//app.js
import './commom/base.css'

//webpack.conf.js
const path = require('path')
module.exports = {
    entry: {
        app: './src/app.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.join(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader'
                    }
                ]
            }
        ]
    }
}

注意（loader的执行顺序是从下到上，也就是说会先执行css-loader再执行stylue-loader）

style-loader 的一些常见的参数，比如insertInto,singleton,transform,base，具体用用法大家可以参考一下文档。然后就是css-loader的一些比较常见的配置参数。minimize：是否对css进行压缩；modules：是否启用css模块化；alias解析别名

二.less预处理

在做项目的时候，我们一般不会直接用css写样式，而是使用一些预处理的语法，比如less，sass。以less为例，我们看一下配置。

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

之前讲过，loader的处理是从下到上，所以less-loader要放下面。

//base.less
@Themecolor: #678;

body {
    background: @Themecolor;
}

把css后缀改成less，修改base.less内容之后重新打包。

三.提取css代码

之前处理css的时候, css内容跟js内容一起被打包在bundle文件中,但是在实际项目中,我们往往希望,js文件和css文件是单独分开的,所以我们需要使用一个插件ExtractTextWebpackPlugin.

先安装一下,安装完之后我们需要修改一下配置文件.

const path = require('path')
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    entry: {
        app: './src/app.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.join(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use:[
                        {
                            loader: 'css-loader'
                        },
                        {
                            loader: 'less-loader'
                        }
                    ]
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: '[name].min.css',
            allChunks: false
        })
    ]
}

filename就是生成的css文件名字,这个可以自己随便取;allChunks是否从所有的chunks中提取,默认是在初始chunks中提取.

打包完之后我们会发现多了一个app.min.css文件.

最后再介绍一下postcss-loader,postcss-loader是一个css的处理工具,可以配合插件一起使用.
比如autoprefixer,可以根据css样式自动加上前缀,postcss-cssnext可使用最新的css语法,cssnano可压缩css.