webpack gère les problèmes de compatibilité du navigateur CSS

Cet article vous apporte des connaissances pertinentes sur javascript, qui présente principalement des problèmes liés à la compatibilité du navigateur CSS de webpack, y compris du contenu connexe sur l'utilisation des plug-ins postcss-loader et postcss-preset-env. Examinons-le ensemble. , j'espère que cela sera utile à tout le monde.

【Recommandations associées : Tutoriel vidéo javascript, front-end web】

1. Traitement de compatibilité CSS

1. Tout d'abord, vous devez ajouter le code suivant à package.json, qui. sera utilisé plus tard【 La configuration ici peut être basée sur les exigences du projet]

  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }

2. Installez les plug-ins : postcss-loader et postcss-preset-env

postcss-preset-env aide postcss-loader à trouver la liste de navigation dans les navigateurs dans package.json La configuration de compatibilité du serveur

par défaut à la configuration de l'environnement de production Si vous souhaitez utiliser la configuration de l'environnement de développement, vous devez ajouter du code dans webpack.config.js :

process.env.NODE_ENV. = "development"

3.webpack La configuration est la suivante : (Notez que selon les derniers attributs de configuration du document officiel, la méthode d'écriture de webpack4 est différente de la méthode d'écriture de webpack5 !!!)

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

Test :

Nous pouvons ajouter les deux attributs suivants au fichier CSS :

  display: flex;
  backface-visibility: hidden;

Exécutez la commande webpack pour empaqueter et afficher le fichier CSS empaqueté :

Fin du traitement de compatibilité CSS

2.

1. Installez le plug-in : css-minimizer-webpack-plugin

2. Comment utiliser ：Dans webpack.config.js :

Introduction :

const cssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin')

Configuration :

  plugins: [
    new cssMinimizerWebpackPlugin()
  ],

[Recommandations associées : javascript tutoriel vidéo, front-end web]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!