webpack(7)_CSS_使用PostCss

程序员文章站 2022-03-14 13:51:44

...

本文主要讲解PostCss在webpack中的常用配置使用，主要包括以下几个方面：

PostCSS介绍
项目准备
使用PostCss和postcss-loader
使用PostCss的autoprefixer插件
使用PostCss的postcss-cssnext插件
使用Broswerslist统一配置
使用PostCss的cssnano插件

PostCSS介绍

PostCSS是一个使用JS插件转换样式的工具。这些插件可以lint你的CSS，支持变量和mixins，转换未来的CSS语法，内联图像等。
PostCSS被包括*，Twitter，阿里巴巴和JetBrains在内的行业领导者使用。该 Autoprefixer PostCSS插件是最流行的CSS处理器之一。
PostCSS采用CSS文件并提供API来分析和修改其规则（通过将它们转换为抽象语法树）。然后，插件可以使用此API 执行许多有用的操作，例如，查找错误会自动插入供应商前缀。
翻译自：https://www.npmjs.com/package/postcss

项目准备

新建目录007_wp_css_postcss
mkdir 007_wp_css_postcss
初始化package.json
npm init，关于项目的一些描述，一路回车键。
新建dist目录和src目录，并在src目录下新建index.js，在src/css目录下新建base.css，在index.js中引入base.css

import './css/base.css'

在项目根目录下新建webpack.config.js，下图是整个项目结构
安装style-loader和css-loader
如果有不懂style-loader和css-loader的，请查看文章：https://blog.csdn.net/u010982507/article/details/81277151
注：postcss-loader配置要在less-loader或sass-loader等预处理语言前面，css-loader和style-loader的后面，例如：

{ 
    loader: 'style-loader',
    options: {
        singleton: true
    }
},
{ 
    loader: 'css-loader',
    options: {
        minimize: true
    }
},
{
    loader: 'postcss-loader'
}
{
    loader: 'less-loader'
}

webpack.config.js基本配置

var path = require("path");
module.exports = {
    entry: {
        index: "./src/index.js"
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        publicPath: "dist/",
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            singleton: true
                        }
                    },
                    { 
                        loader: 'css-loader',
                        options: {
                            minimize: true
                        }
                    }
                ]
            }
        ]
    }
}

在项目根目录下新建index.htm，并引入打包后的js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="box">
    box
</div>
<script src="dist/index.bundle.js"></script>
</body>
</html>

使用PostCss和postcss-loader

安装postcss
npm install postcss --save-dev
安装postcss-loader
npm install postcss-loader --save-dev
配置webpack.config.js

module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                {
                    loader: 'style-loader',
                    options: {
                        singleton: true
                    }
                },
                { 
                    loader: 'css-loader',
                    options: {
                        minimize: true
                    }
                },
                {
                    loader: 'postcss-loader',
                    options: {
                        ident: 'postcss', // 表示下面的插件是对postcss使用的
                        plugins: [

                        ]
                    }
                }
            ]
        }
    ]
}

使用PostCss的autoprefixer插件

作用
解析css rules，通过Can I Use 网站提供的值来添加浏览器前缀。
安装autoprefixer
npm install autoprefixer --save-dev
在base.css文件中添加代码

.box {
    transition: transform 1s; // 需要加浏览器前缀进行适配
}

在webpack.config.js中引入AutoPrefixer

var AutoPrefixer = require('autoprefixer');

在postcss-loader中调用

{
    loader: 'postcss-loader',
    options: {
        ident: 'postcss',  // 表示下面的插件是对postcss使用的
        plugins: [
            AutoPrefixer(),
        ]
    }
}

执行webpack打包命令，并在浏览器上运行，查看页面样式源代码，会发现css样式被加上了浏览器前缀。

使用PostCss的postcss-cssnext插件

作用
解析css rules，允许使用未来出现的css语法格式。
安装postcss-cssnext
npm install postcss-cssnext --save-dev
在base.css文件中添加代码

:root {
    --mainColor: #00ff00; //定义css变量
}
html {
    background: var(--mainColor); // 引用css变量
}

在webpack.config.js中引入postcss-cssnext

var PostCss_CssNext = require('postcss-cssnext');

在postcss-loader中调用

{
    loader: 'postcss-loader',
    options: {
        ident: 'postcss',  // 表示下面的插件是对postcss使用的
        plugins: [
            AutoPrefixer(),
            PostCss_CssNext()
        ]
    }
}

执行webpack打包命令，会发现控制台出现一个警告

Warning: postcss-cssnext found a duplicate plugin ('autoprefixer') in your postcss plugins. 
This might be inefficient. You should remove 'autoprefixer' from your postcss plugin list since 
it's already included by postcss-cssnext.

/*警告的意思是：因为postcss-cssnext中已经包含autoprefixer，所以需要移除掉autoprefixer。
移除掉autoprefixer后再执行打包命令，就不会出现这个警告了。*/

运行index.html在浏览器上查看css代码，可以看到css语法已经被转化成浏览器识别的语法。

使用browserslist统一配置

作用
统一配置浏览器兼容列表。
在package.json中配置

 "browserslist": [
    ">= 1%",
    "last 2 version"
  ]

在根目录下创建.browserslistrc文件配置

使用PostCss的cssnano插件

1、作用
cssnano是一个非常强大的CSS优化的插件包，这个插件包是一个可以即插即用的。它汇集了大约25个插件，只需要执行一个命令，就可以做多方面不同类型的优化。cssnano优化包括下面一些类型：

删除空格和最后一个分号
删除注释
优化字体权重
丢弃重复的样式规则
优化calc()
压缩选择器
减少手写属性
合并规则

参考: https://www.w3cplus.com/PostCSS/using-postcss-for-minification-and-optimization.html
本文只讲webpack中cssnano的使用，github地址：
https://github.com/postcss/postcss-loader
2、使用cssnano

安装cssnano
npm install cssnano --save-dev
在webpack.config.js中引入cssnano

var CssNano =require('cssnano');

在postcss-loader中调用

{
    loader: 'postcss-loader',
    options: {
        ident: 'postcss',  // 表示下面的插件是对postcss使用的
        plugins: [
            PostCss_CssNext(),
            CssNano()
        ]
    }
}

执行webpack打包命令，并在浏览器上运行，查看页面样式源代码，会发现css样式都被压缩优化了。

注：未完待续
postcss-import
postcss-url
postcss-assets

webpack(7)_CSS_使用PostCss

PostCSS介绍

项目准备

使用PostCss和postcss-loader

使用PostCss的autoprefixer插件

使用PostCss的postcss-cssnext插件

使用browserslist统一配置

使用PostCss的cssnano插件

(精华)2020年7月12日 webpack 常见插件的使用

webpack3.0问题系列 ——postcss-loader的使用

如何使用webpack2.0配置postcss-loader的方法详解

如何使用webpack2.0配置postcss-loader的方法详解

webpack(7)_CSS_使用PostCss

webpack(7)_CSS_使用style-loader和css-loader

webpack(7)_CSS_使用extract-text-webpack-plugin提取css

(精华)2020年7月12日 webpack 常见插件的使用