webpack的postcss的基本应用

我就是我 2021-12-04 07:07 235阅读 0赞

*  PostCss是什么？
 *  PostCSS在webpack中的基本应用

##  一、PostCss是什么？ ##

如果有深入学习PostCss需求的话可以参考大漠的资料：[https://www.w3cplus.com/blog/tags/516.html][https_www.w3cplus.com_blog_tags_516.html]

大概来说postcss是一个用来处理css的系统程序，它不是css语处理器，也不是css后处理后处理器，也不是新的语法，也不是优化工具。postcss本身只做两件事，将css转换成css抽象语法树，可以简单的理解为将css转换成js；postcss做的第二件事就是调用插件来处理抽象语法树，通过插件实现对css的处理。

这篇博客只是postcss的基本应用，并不对postcss的实现原理以及插件开发做任何解析。通常现在使用postcss的处理css前缀的插件有postcss-cssnext和autoprefixer，postcss-cssnext包含了autoprefixer的添加前缀功能，还具备处理css未来的语法特性；比较常用的插件还有cssnano用来压缩css代码。

##  二、PostCss在webpack中的基本应用 ##

工作区间文件结构

//工作区间
        src//文件夹
            demo.less
            index.js
        index.html
        package.json
        webpack.config.js

需要的模块：

//除了必备webpack webpack-cli打包工具必备的插件和处理模块
    npm install less less-loader --save-dev //处理less
    npm install css-loader postcss postcss-loader cssnano postcss-cssnext autoprefixer --save-dev//集成postcss
    npm mini-css-extract-plugin --save-dev//生成css文件

webpack.config.js配置文件：关键在于配置postcss，要将它放在less-loader和css-loader中间。

1 var path = require("path");
     2 const PurifyCSSPlugin = require('purifycss-webpack');
     3 var MiniCssExtractPlugin = require("mini-css-extract-plugin");
     4 module.exports = {
     5     entry: {
     6         index: './src/index.js',
     7     },
     8     output: {
     9         path: path.resolve(__dirname, "dist"),
    10         filename: "[name]-[hash:5].bundle.js"
    11     },
    12     module: {
    13         rules: [
    14             {
    15                 test: /\.less$/,
    16                 use: [
    17                     { loader: MiniCssExtractPlugin.loader },
    18                     { loader: 'css-loader' },
    19                     {
    20                         loader: 'postcss-loader',
    21                         options: {
    22                             ident: 'postcss',
    23                             plugins: [
    24                                 // require('autoprefixer')(),//添加前缀
    25                                 require('postcss-cssnext')(),//添加前缀 转换css未来语法
    26                                 require('cssnano')({
    27                                     preset: 'default'
    28                                 }), 
    29                             ]
    30                         }
    31                     },
    32                     { loader: 'less-loader' }],
    33             }
    34         ]
    35     },
    36     plugins: [
    37         new MiniCssExtractPlugin({
    38             filename: "[name]-[hash:5].css",
    39         })
    40     ]
    41 }

其他文件的代码：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 *{
     2     margin: 0;
     3     padding: 0;
     4 }
     5 body{
     6     background-color: #f00;
     7     .wrapper{
     8         position: absolute;
     9         width: 300px;
    10         height: 300px;
    11         left: 50%;
    12         top: 50%;
    13         transform: translate(-50%,-50%);
    14         border: 1px solid #3addff;
    15         border-radius: 10px;
    16         background-color: #3acfaa;
    17         display: flex;
    18         justify-content: center;
    19         align-items: center;
    20         .box{
    21             width:160px;
    22             height: 160px;
    23             background: #92d000;
    24             border-radius: 10px;
    25             line-height: 160px;
    26             span{
    27                 display: inline-block;
    28                 width: 100%;
    29                 color: #3acfaa;
    30                 font-size: 32px;
    31                 text-align: center;
    32                 font-weight: 600;
    33                 text-shadow: -3px -3px 1px #000,1px 1px 3px #fff;
    34             }
    35         }
    36     }
    37     
    38 }

less代码

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 import './demo.less';

js代码

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     7     <title>Document</title>
     8     
     9     <link rel="stylesheet" href="./dist/index-5fde8.css">
    10 </head>
    11 <body>
    12     <div class="wrapper">
    13         <div class="box">
    14             <span>SPAN</span>
    15         </div>
    16     </div>
    17 </body>
    18 </html>

HTML代码

最后注明以下关于postcss-cssnext的未来语法处理在测试代码中没有相关的语法处理，用下面的代码来说明一下：

1 :root{
    2     --color:red;
    3 }
    4 a{
    5     color:var(--color);
    6 }

上面这些代码在浏览器中还不能直接被解析，可以通过postcss-cssnext转换。

注意，如果使用postcss并使用cssnano优化压缩css代码的话，在plugins中就不能配置PurifyCSSPlugin来做css tree shaking操作，因为PurifyCSSPlugin会导致原本被cssnano压缩的代码会有恢复到了非压缩状态，这两个插件是冲突的。

转载于:https://www.cnblogs.com/ZheOneAndOnly/p/11105478.html

[https_www.w3cplus.com_blog_tags_516.html]: https://www.w3cplus.com/blog/tags/516.html
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211204/c3c709bb7c234a0da90552dc2a8b1944.png