Exemple d'analyse du webpack pour extraire les CSS dans des fichiers séparés (code joint)

Cet article vous apporte des connaissances pertinentes sur javascript Il présente principalement les problèmes liés à l'extraction de CSS par Webpack dans des fichiers séparés, y compris le traitement de la compatibilité CSS et la compression des CSS. J'espère que cela aidera tout le monde.

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

Extraire le CSS dans un fichier séparé

1 Installez le plug-in et introduisez

npm install mini-css-extract-plugin -D
const  MiniCssExtractPlugin = require('mini-css-extract-plugin')

2. dans les plugins

plugins: [
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename:'css/built.css'//对输出的文件进行重命名,默认为main.css
        })
    ],

3. Modifiez le fichier du chargeur

{
   test:/.css$/,
   use:[
      //取代css-loader,提取js中css成单独文件（注意）
       MiniCssExtractPlugin.loader,
       //将css文件整合到JS文件中
      'css-loader',
   ]
},

Traitement de compatibilité CSS

1. Installez le plug-in

npm install postcss-loader postcss-preset-env -D

2 Configurez postcss-loader dans le module et configurez le plug-in postcss-preset-env

{
                test:/.css$/,
                use:[
                    //取代css-loader,提取js中css成单独文件
                    MiniCssExtractPlugin.loader,
                    //将css文件整合到JS文件中
                    'css-loader',
                    //css兼容性处理：postcss --> postcss-loader postcss-preset-env
                    //帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式
                    {
                        loader:'postcss-loader',
                        options: {
                            ident: 'postcss',//默认配置
                            plugins: () => [
                                require('postcss-preset-env')()
                            ]
                        }
                    }
                ]
            },

. 3. Configurez la liste des navigateurs dans package.json

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

4. Afin que l'environnement de développement dans la liste des navigateurs dans package.json prenne effet, l'environnement doit être configuré dans webpack.config.js, car la valeur par défaut est l'environnement de production, et nous avons besoin d'un environnement de développement pour le développement

const {resolve}=require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const  MiniCssExtractPlugin = require('mini-css-extract-plugin')
//设置node.js环境变量,默认是生产环境，配置后为开发环境；
 process.env.NODE_ENV = 'development';

Compresser css

1 Installez le plug-in et citez

npm install optimize-css-assets-webpack-plugin -D
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

2 Configurez le plug-in dans plugins

plugins: [
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename:'css/built.css'//对输出的文件进行重命名
        }),
        //压缩css文件
        new OptimizeCssAssetsWebpackPlugin()
    ],

[Tutoriels vidéo associés recommandés : Tutoriel d'introduction à vuejs. , Démarrer avec le 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!