Webpack4系列教程(四) CSS相关配置

写在前面

在这篇博客中，我将会你介绍CSS部分的相关配置

基本配置

我们先看一下目录结构

然后，我们在入口文件index.js中引入base.less文件

import './css/base.less';

这样子是不行的。我们知道，webpack是只能识别JS的，对于Css及Less的处理，我们需要借助相应的loader

我们安装这几个loader

cnpm i -D less less-loader css-loader style-loader

在rules中进行配置

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

loader的执行顺序是自右往左的，即less-loader - css-loader - style-loader

1. less-loader：将less文件转换成css文件
2. css-loader: 加载css文件
3. style-loader：使用<style>将css-loader内部样式注入到我们的HTML页面

执行打包命令后我们发现css代码已经打包到了生成的js文件中，打开页面后也有了样式。而css代码我们并不想和js打包到一起，那么有什么方法实现呢？我们可以用mini-css-extract-plugin插件将css抽离出来

抽离CSS（mini-css-extract-plugin）

配置plugins

new MiniCssPlugin({
	filename: '[name].[hash:5].bundle.css'
})

配置loader

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

执行打包命令，我们看一下目录结构

dist目录下生成了css文件，并且挂载到了html文件上
我们打开生成的css文件，发现.active并没有使用到却也打包了进来，我们可以用purifycss-webpack消除未使用的CSS

消除未使用的CSS （purifycss-webpack）

我们安装这个插件

cnpm i -D purifycss-webpack purify-css

因为我们需要同步检查html模板，所以我们需要引入node的glob对象使用。在webpack.config.js文件头部引入glob。

const glob = require('glob');

配置plugins

new PurifyCSSPlugin({
	// Give paths to parse for rules. These should be absolute!
	paths: glob.sync(path.join(__dirname, 'src/*.html')),
})

这里配置了一个paths，主要是需找html模板，purifycss根据这个配置会遍历你的文件，查找哪些css被使用了

我们再次运行打包命令，.active便没有被打包进来了。
仔细观察我写的css，会发现我写了一个css3的属性transform: translate(50deg, 50deg);，有些css属性因为浏览器的差异是需要带前缀来进行兼容的，需要我们手动辨识和添加这些前缀吗？我们有更方便的做法，我们用autoprefixer postcss给某些css属性自动带上前缀

CSS加前缀

我们进行安装

cnpm install --save-dev  postcss-loader autoprefixer postcss

在项目根目录创建 postcss.config.js

在项目根目录创建 postcss.config.js，并且设置支持哪些浏览器，必须设置支持的浏览器才会自动添加添加浏览器兼容

配置loader

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

运行打包命令后css属性自动加上了前缀

但是打包后的css代码并没有被压缩，我们用optimize-css-assets-webpack-plugin压缩css代码

压缩css代码（optimize-css-assets-webpack-plugin）

配置plugins

new OptimizeCssAssetsPlugin()

执行打包命令后，完成压缩