Webpack5之CSS3自动补齐前缀

Posted 2022-11-23 IT人.阿标

文章目录

• • 背景
  • 使用步骤

背景

首先看文章标题，我们带着一个疑问，为什么CSS3需要带前缀呢？

浏览器厂商以前就一直在实施CSS3，但它还未成为真正的标准。各大浏览器的标准没有完全统一，导致各个浏览器地兼容不一样，到现在，依然还有很多属性需要带前缀。

前缀	浏览器	内核
-ms-	IE浏览器	Trident内核
-moz-	Firefox	Gecko内核
-o-	Opera	Presto内核
-webkit-	Chrome和Safari	Webkit内核

浏览器地兼容性问题，可以在Can I use，关网上查询，同时下面介绍的插件也是根据Can I use来自动设置解决方案。下面是网站截图：

使用步骤

首先我们来介绍两个工具：

1. postcss

   利用从 Can I Use 网站获取的数据为 CSS 规则添加特定厂商的前缀。 Autoprefixer 自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮你自动为 CSS 规则添加前缀。

   PostCSS Preset Env 帮你将最新的 CSS 语法转换成大多数浏览器都能理解的语法，并根据你的目标浏览器或运行时环境来确定你需要的 polyfills，此功能基于 cssdb 实现。

   CSS 模块 能让你你永远不用担心命名太大众化而造成冲突，只要用最有意义的名字就行了。

   通过使用 stylelint 强化一致性约束并避免样式表中的错误。stylelint 是一个现代化 CSS 代码检查工具。它支持最新的 CSS 语法，也包括类似 CSS 的语法，例如 SCSS 。

2. autoprefixer

   它是postcss中的一个插件。见名知意，它的作用主要就说用来补齐css前缀

• 插件安装

  npm i -D postcss-loader autoprefixer
  

• 配置webpack.config.js

  'use strict';
  
  const path = require('path');
  const webpack = require('webpack');
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
  const autoprefixer = require('autoprefixer');
  
  module.exports = 
      entry: 
          app: './src/index.js',
          search: './src/search.js'
      ,                //打包入口文件(如果是单个入口就是字符串，如果是多个入口就需要配置成对象)
      output:                                //打包输出文件
          path: path.join(__dirname, 'dist'),
          filename: '[name]_[chunkhash:8].js'
      ,
      // watch: true,
      mode: 'production',                      //环境
      module: 
          rules: [
              
                  test: /\\.css$/,
                  use: [
                      // 'style-loader',
                      MiniCssExtractPlugin.loader,
                      'css-loader',
                  ]
              ,
              
                  test: /\\.less$/,
                  use: [
                      // 'style-loader',
                      MiniCssExtractPlugin.loader,
                      'css-loader',
                      'less-loader',
                      
                          loader: "postcss-loader",
                          options: 
                              postcssOptions: 
                                  plugins: [autoprefixer(
                                      overrideBrowserslist: [
                                          'last 10 Chrome versions',
                                          'last 5 Firefox versions',
                                          'Safari >= 6',
                                          'ie> 8'
                                      ]
                                  )]
                              
  
                          
                      
                  ]
              
          ]
      
    
  

当前插件版本信息：

Webpack:5.69.1

Postcss-loader:10.2.0

Autoprefixer:10.4.2

less-loader:10.2.0