webpack的postcss的基本应用

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

一、PostCss是什么？

如果有深入学习PostCss需求的话可以参考大漠的资料：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中间。

 var path = require("path");

 const PurifyCSSPlugin = require('purifycss-webpack');

 var MiniCssExtractPlugin = require("mini-css-extract-plugin");

 module.exports = {

     entry: {

         index: './src/index.js',

     },

     output: {

         path: path.resolve(__dirname, "dist"),

         filename: "[name]-[hash:5].bundle.js"

     },

     module: {

         rules: [

             {

                 test: /\.less$/,

                 use: [

                     { loader: MiniCssExtractPlugin.loader },

                     { loader: 'css-loader' },

                     {

                         loader: 'postcss-loader',

                         options: {

                             ident: 'postcss',

                             plugins: [

                                 // require('autoprefixer')(),//添加前缀

                                 require('postcss-cssnext')(),//添加前缀 转换css未来语法

                                 require('cssnano')({

                                     preset: 'default'

                                 }),

                             ]

                         }

                     },

                     { loader: 'less-loader' }],

             }

         ]

     },

     plugins: [

         new MiniCssExtractPlugin({

             filename: "[name]-[hash:5].css",

         })

     ]

 }

其他文件的代码：

 *{

     margin: 0;

     padding: 0;

 }

 body{

     background-color: #f00;

     .wrapper{

         position: absolute;

         width: 300px;

         height: 300px;

         left: 50%;

         top: 50%;

         transform: translate(-50%,-50%);

         border: 1px solid #3addff;

         border-radius: 10px;

         background-color: #3acfaa;

         display: flex;

         justify-content: center;

         align-items: center;

         .box{

             width:160px;

             height: 160px;

             background: #92d000;

             border-radius: 10px;

             line-height: 160px;

             span{

                 display: inline-block;

                 width: 100%;

                 color: #3acfaa;

                 font-size: 32px;

                 text-align: center;

                 font-weight: 600;

                 text-shadow: -3px -3px 1px #000,1px 1px 3px #fff;

             }

         }

     }

 }

less代码

 import './demo.less';

js代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <!--注意生成的css文件名-->

     <link rel="stylesheet" href="./dist/index-5fde8.css">

 </head>

 <body>

     <div class="wrapper">

         <div class="box">

             <span>SPAN</span>

         </div>

     </div>

 </body>

 </html>

HTML代码

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

 :root{

     --color:red;

 }

 a{

     color:var(--color);

 }

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

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