入门webpack的最佳实践（基于webpack4.X 5.X）-- postcss-loader介绍

Jou

发布于 2022-09-27 16:56:26

8480

发布于 2022-09-27 16:56:26

文章被收录于专栏：前端技术归纳前端技术归纳

导语

来到这家公司之后，一直在使用webpack，也写了不少笔记，但是都比较零散，现在决定整理一下webpack相关的知识点，由浅入深，方便自己后续查漏补缺，后续会一直更新。

前言

前面几篇文章介绍了一些优化打包速度和打包体积的插件，除此之外，webpack社区还有非常多功能强大的插件，而本文将介绍postcss-loader的插件配置。

postcss-loader

postcss-loader是一个处理css的loader，它提供了很多增强css的插件

基础配置

{
    test: /.css$/i,
    use: [
      'style-loader',
      'css-loader',
      {
        loader: 'postcss-loader',
        options: {
          postcssOptions: {
            plugins: [
             //...
            ],
          },
        },
      },
    ],

autoprefixer

autoprefixer 可以给不兼容的css属性自动加上浏览器前缀

配置

{
  loader: 'postcss-loader',
  options: {
    postcssOptions: {
      plugins: [
        'autoprefixer', 
      ],
    },
  },
},

比如打包前的app.less为，其中，user-select的写法不兼容所有的浏览器

.app {
  width: 500px;
  height: 400px;
  background-color: orange;
  color: aqua;
  font-size: 24px;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  user-select: none;
}

打包之后，可以看到，它自动为我们补上了浏览器前缀

postcss-preset-env

postcss-preset-env会帮助我们通用css的格式，比如说，如果我们将一个颜色的值写为 #12345678，有些浏览器就不会生效，而有些浏览器会将最后两位 78 识别为透明度

为了兼容不同的浏览器，postcss-preset-env插件会帮助我们将这一类色值的最后两位都编译成透明度。

配置

{
  loader: 'postcss-loader',
  options: {
    postcssOptions: {
      plugins: [
        'postcss-preset-env',
        'autoprefixer', 
      ],
    },
  },
},

使用

//less
img,
span,
button {
    margin-bottom: 20px;
    color: #12345678;
}

除此之外，使用postcss-preset-env插件也可以实现浏览器前缀补全，基于此，我们也没必要在使用autoprefixer了

配置

{
  loader: 'postcss-loader',
  options: {
    postcssOptions: {
      plugins: [
        [
          'postcss-preset-env', //通用化css格式
          {
            autoprefixer: {
              flexbox: 'no-2009',
            },
            stage: 3,
          },
        ],
      ],
    },
  },
},

注意这里给插件传值，是将参数放在了数组的第二个对象中

postcss-flexbugs-fixes

postcss-flexbugs-fixes插件会帮我们自动校正flex相关的语句

配置

{
  loader: 'postcss-loader',
  options: {
    postcssOptions: {
      plugins: [
        'postcss-flexbugs-fixes',
        //...
      ],
    },
  },
},

postcss-normalize

postcss-normalize可以帮我们规范化css的代码，主要是将一些无意义、不可维护的css属性剔除，比如

audio,
video {
  display: inline-block;
}

配置

{
  loader: 'postcss-loader',
  options: {
    postcssOptions: {
      plugins: [
        'postcss-normalize', 
        //...
      ],
    },
  },
},

css module

在多人合作的项目中，非常容易出现css类名冲突的问题，而css module的存在就是为了解决这个问题，配置完css module之后，我们不再直接将样式文件引入组件中，而是从样式文件引入一个对象，然后将类名作为对象的属性赋值给组件的class。

配置

{

  test: /\.less/,
  use: [
            'style-loader',
            {
              loader: 'css-loader',
              options: {
                modules: true,
                importLoaders: 1,
              },
            },
        ]
 }

注意，因为样式直接被引入到了组件中，所以打包不会再产生单独的css文件，这里也不用在配置MiniCssExtractPlugin.loader和less-loader

使用

//base.less
.module {
  color: #848ad6;
}

组件

import React from 'react';
import styles from './base.less';

const Component = () => {
  return <div class={styles.module}></div>;
};

export default Component;