Para implementar la división de código CSS y su compresión en webpack, es necesario instalar los plugins correspondientes. Asumiendo que ya has configurado la división de módulos, procede con los siguientes pasos. Ten en cuenta que el plugin mini-css-extract-plugin no soporta la actualización en caliente (HMR), por lo que solo se recomienda su uso en modo producción para evitar sobrecargas durante el desarrollo.

npm install mini-css-extract-plugin css-minimizer-webpack-plugin --save-dev

Configura la extracción de CSS en archivos separados. En el archivo de configuración de producción, integra el loader de extracción y define los patrones de nombre para los archivos generados.

// Archivo: webpack.produccion.js
const { combinador } = require('webpack-merge');
const configuracionBase = require('./webpack.comun');
const PluginExtraccionCSS = require('mini-css-extract-plugin');

const configuracionProduccion = {
    modo: 'produccion',
    herramientaDesarrollo: 'fuente-mapa-modulo-barato',
    modulo: {
        reglas: [
            {
                prueba: /\.([sc]|c)ss$/,
                uso: [
                    PluginExtraccionCSS.cargador,
                    'cargador-css',
                    'cargador-sass'
                ]
            }
        ]
    },
    complementos: [
        new PluginExtraccionCSS({
            nombreArchivo: '[nombre].css',
            nombreFragmento: '[id].css',
        }),
    ]
}
module.exports = combinador(configuracionProduccion, configuracionBase)

Para habilitar la compresión del CSS, agrega el plugin de minimización en la sección de optimización. Esto reducirá el tamaño de los archivos CSS en el build de producción.

// Archivo: webpack.produccion.js (versión extendida)
const { combinador } = require('webpack-merge');
const configuracionBase = require('./webpack.comun');
const PluginExtraccionCSS = require('mini-css-extract-plugin');
const PluginMinimizarCSS = require('css-minimizer-webpack-plugin');

const configuracionProduccion = {
    modo: 'produccion',
    herramientaDesarrollo: 'fuente-mapa-modulo-barato',
    modulo: {
        reglas: [
            {
                prueba: /\.([sc]|c)ss$/,
                uso: [
                    PluginExtraccionCSS.cargador,
                    'cargador-css',
                    'cargador-sass'
                ]
            }
        ]
    },
    complementos: [
        new PluginExtraccionCSS({
            nombreArchivo: '[nombre].css',
            nombreFragmento: '[id].css',
        }),
    ],
    optimizacion: {
        minimizador: [
            new PluginMinimizarCSS(),
        ],
    },
}
module.exports = combinador(configuracionProduccion, configuracionBase)

Si has activado el tree shaking en tu configuración, es crucial ajustar el campo sideEffects en el archivo package.json. De lo contrario, los archivos CSS podrían ser eliminados incorrectamente durante el proceso de construcción, ya que no se detectan como dependencias directas en el código JavaScript.

"efectosColaterales": [
    "*.css"
  ],

En resumen, para el entorno de desarrollo es preferible usar style-loader para mantener la compatibilidad con HMR, mientras que en producción se sustituye por PluginExtraccionCSS.cargador para la extracción y compresión de CSS.