Beispiel für das Parsen eines Webpacks zum Extrahieren von CSS in separate Dateien (Code im Anhang)

Dieser Artikel vermittelt Ihnen relevantes Wissen über Javascript. Er stellt hauptsächlich die Probleme im Zusammenhang mit der CSS-Kompatibilitätsverarbeitung und der CSS-Komprimierung vor. 🔜 in Plugins

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

3. Ändern Sie die Loader-Datei

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

CSS-Kompatibilitätsverarbeitung

1. Installieren Sie das Plug-in

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

2. Konfigurieren Sie den Postcss-Loader im Modul und konfigurieren Sie das Postcss-Preset-Env-Plugin

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

3. Konfigurieren Sie die Browserliste in package.json

{
                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')()
                            ]
                        }
                    }
                ]
            },

4. Damit die Entwicklungsumgebung in der Browserliste in package.json wirksam wird, muss die Umgebung in webpack.config.js konfiguriert werden, da die Standardeinstellung die Produktionsumgebung ist. und wir benötigen eine Entwicklungsumgebung für die Entwicklung

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

CSS komprimieren

1. Installieren Sie das Plug-in und referenzieren Sie es

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

,

Erste Schritte mit dem Web-Frontend

]

Das obige ist der detaillierte Inhalt vonBeispiel für das Parsen eines Webpacks zum Extrahieren von CSS in separate Dateien (Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!