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

WBOY
Libérer: 2022-08-09 14:50:19
avant
2483 Les gens l'ont consulté

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.

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

【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"
    ]
  }
Copier après la connexion

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', {}]]
              }
            }
          }
Copier après la connexion

Test :

Nous pouvons ajouter les deux attributs suivants au fichier CSS :

  display: flex;
  backface-visibility: hidden;
Copier après la connexion

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')
Copier après la connexion

Configuration :

  plugins: [
    new cssMinimizerWebpackPlugin()
  ],
Copier après la connexion

[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!

Étiquettes associées:
source:csdn.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal