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中间。

 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 }

其他文件的代码：

 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代码
1 import './demo.less';
js代码
 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     <!--注意生成的css文件名-->
 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压缩的代码会有恢复到了非压缩状态，这两个插件是冲突的。

 

posted @ 2019-06-29 19:16  他乡踏雪  阅读(1300)  评论(0)  编辑  收藏  举报