Parlons de la façon dont webpack4 gère les CSS

Webpack4 traitant les CSS

Préface : Le traitement des CSS par Webpack est un sujet très basique. C'est juste que dans webpack4, lors de l'utilisation du préfixe automatique pour résoudre la compatibilité du navigateur CSS, il y aura un piège différent d'avant. Je vais donc écrire sur ces connaissances en détail.

1. Dépendances requises

• style-loader : Injectez des fichiers CSS dans la balise de style de la page html. Référence : https://www.webpackjs.com/loa...
• css-loader : analyse les fichiers CSS importés dans js. Référence : https://www.webpackjs.com/loa...
• less-loader : analyse le langage de prétraitement CSS Si vous utilisez d'autres langages de prétraitement, vous devez utiliser le chargeur correspondant. Référence : https://www.html.cn/doc/webpa...

• postcss-loader : Post-traitez le CSS que nous avons écrit dans le projet :

  • Analysez le CSS dans une abstraction qui peut être exploitée par Structure arborescente de syntaxe JavaScript (Abstract Syntax Tree, AST),
  • Appelez le plug-in pour traiter l'AST et obtenir le résultat.
• autoprefixer : Un plug-in pour postcss-loader qui préfixe css pour s'adapter aux différents navigateurs.

Remarque : postcss-loader fonctionne comme un processus de post-production cinématographique et télévisuelle. Il combine tous les fichiers originaux, puis utilise des plug-ins pour ajouter des effets spéciaux et génère enfin le produit fini. Le plug-in de préfixe automatique effectue un post-traitement sur l'AST analysé par postcss-loader.

Deuxièmement, installez les dépendances

npm install --save-dev less-loader less style-loader css-loader postcss-loader autoprefixer

Trois, créez moins de fichier de test style.less

#world{
  display: flex;
}

Quatre, importez style.less dans le fichier principal index.js

import './style.less';

Cinq, fichier de configuration du webpack webpack.config.js

module: {
    rules: [
        {
            test: /\.less$/,
            use: [
                'style-loader',
                {loader: 'css-loader', options: { importLoaders: 1 } },
                'less-loader',
                'postcss-loader'
            ]
        },
    ]
}

importLoaders: 1 de css-loader est un paramètre très important. Cela entraînera l’injection de tous les CSS analysés dans une seule balise de style. Sans cette configuration, une nouvelle balise de style sera créée à chaque nouveau fichier CSS injecté. Certains navigateurs ont une limite sur le nombre de balises de style.

Sixièmement, créez le fichier de configuration postcss postcss.config.js et introduisez-y le plug-in de préfixe automatique

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

Septièmement, ajoutez la liste des navigateurs dans package.json. C'est l'écueil mentionné dans la préface, sinon l'autopréfixe ne fonctionnera pas

{
 "scripts": {
  "build": "webpack",
  "dev": "webpack-dev-server  --mode development"
 },
 "browserslist": [
  "defaults",
  "not ie < 11",
  "last 2 versions",
  "> 1%",
  "iOS 7",
  "last 3 iOS versions"
 ]
}

Huit, exécutez la commande

npm run build

Neuf, l'analyse css est réussie, l'effet est le suivant :

#world {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

Apprentissage recommandé : "css video tutoriel"

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!