Exemple d'analyse du webpack pour extraire les CSS dans des fichiers séparés (code joint)-Questions et réponses frontales-php.cn

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

WBOY

Libérer： 2022-08-09 13:48:15

avant

2077 Les gens l'ont consulté

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.

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

【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(&#39;mini-css-extract-plugin&#39;)

Copier après la connexion

2. dans les plugins

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

Copier après la connexion

3. Modifiez le fichier du chargeur

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

Copier après la connexion

Traitement de compatibilité CSS

1. Installez le plug-in

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

Copier après la connexion

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文件中
                    &#39;css-loader&#39;,
                    //css兼容性处理：postcss --> postcss-loader postcss-preset-env
                    //帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式
                    {
                        loader:&#39;postcss-loader&#39;,
                        options: {
                            ident: &#39;postcss&#39;,//默认配置
                            plugins: () => [
                                require(&#39;postcss-preset-env&#39;)()
                            ]
                        }
                    }
                ]
            },

Copier après la connexion

. 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"
    ]
  }

Copier après la connexion

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(&#39;path&#39;)
const HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;)
const  MiniCssExtractPlugin = require(&#39;mini-css-extract-plugin&#39;)
//设置node.js环境变量,默认是生产环境，配置后为开发环境；
 process.env.NODE_ENV = &#39;development&#39;;

Copier après la connexion

Compresser css

1 Installez le plug-in et citez

npm install optimize-css-assets-webpack-plugin -D
const OptimizeCssAssetsWebpackPlugin = require(&#39;optimize-css-assets-webpack-plugin&#39;)

Copier après la connexion

2 Configurez le plug-in dans plugins

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

Copier après la connexion

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