Cómo empacar css con Webpack

Tengo una configuración sencilla de Webpack que mira a través de todas las carpetas bajo 'src/build', tomar los archivos js individuales y minified y los agrupa en un archivo 'producción' localizado en 'dist/main.js'. Aquí está el config de Webpack:

const path = require('path');
const glob = require('glob');

module.exports = {
  entry: {
    js: glob.sync('./lib/build/**/*.js'),
  },
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

Ahora quiero hacer lo mismo con los archivos 'css'.

Me encontré con el siguiente blog que muestra cómo hacerlo usando el plugin ExtractTextWebpackPlugin pero parece que ahora está deprecado. https://medium.com/trabe/multiple-css-bundles-with-webpack-75f263095f09

También miré 'cs-loader' en los documentos Webpack pero no parece ser una solución adecuada para lo que estoy tratando de hacer.

Para recaptar, lo que estoy tratando de lograr es que Webpack mire todos los archivos css en esta ubicación:

./lib/build/**/*.css

y minificar y empaquetar todos en 1 archivo de salida, que sería

./dist/main.css

Nota: Para el contexto esto es para una biblioteca de componentes React. Normalmente obtendría este comportamiento fuera de la caja con la aplicación de react de creación, pero no lo estoy usando en este caso, así que tratando de reproducirlo manualmente con Webpack.

¡Gracias por cualquier consejo!

Pregunta hecha hace 3 años, 4 meses, 29 días - Por devdynamo

2 Respuestas:

  • Para empaquetar archivos CSS con Webpack en un solo archivo de salida, puedes utilizar el plugin MiniCssExtractPlugin. Aquí te muestro cómo puedes modificar tu configuración de Webpack para lograrlo:

    • Primero, instala el plugin ejecutando el siguiente comando en tu terminal:
    
npm install --save-dev mini-css-extract-plugin
    • Luego, modifica tu archivo de configuración de Webpack de la siguiente manera:
    javascript


    const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    


    module.exports = {
  entry: {
    js: glob.sync('./lib/build//.js'),
    css: glob.sync('./lib/build//.css'),
  },
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'main.css',
    }),
  ],
};

    Con esta configuración, tus archivos CSS se empaquetarán y minificarán en un solo archivo llamado 'main.css' ubicado en la carpeta 'dist'.

    Espero que esta información te sea útil. ¡Déjame saber si necesitas más ayuda!

    Respondida el Dec 18, 2020 a las 23:18 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Solución utilizando MiniCssExtractPlugin:

    Para empaquetar archivos CSS con Webpack y el complemento MiniCssExtractPlugin, sigue estos pasos:

    • Instala MiniCssExtractPlugin:

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

    • Configura Webpack:

    Agrega la siguiente configuración a tu archivo de configuración de Webpack (webpack.config.js):

    js
   const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    


    module.exports = {
     // ... Tu configuración existente
     module: {
       rules: [
         {
           test: /.css$/,
           use: [
             MiniCssExtractPlugin.loader,
             'css-loader',
           ],
         },
       ],
     },
     plugins: [
       new MiniCssExtractPlugin({
         filename: 'main.css',
       }),
     ],
   };

    • Actualiza tu entrada de Webpack:

    Agrega la siguiente línea a tu objeto entry de Webpack:

    js
   entry: {
     js: glob.sync('./lib/build//.js'),
     css: glob.sync('./lib/build//.css'),
   },

    • Ejecuta Webpack:

    Ejecuta el comando webpack para empaquetar tus archivos.

    Esto creará un archivo main.css en el directorio dist.

    Solución utilizando style-loader y css-loader:

    • Instala style-loader y css-loader:

    
   npm install --save-dev style-loader css-loader

    • Configura Webpack:

    Agrega la siguiente configuración a tu archivo de configuración de Webpack (webpack.config.js):

    js
   module.exports = {
     // ... Tu configuración existente
     module: {
       rules: [
         {
           test: /.css$/,
           use: [
             'style-loader',
             'css-loader',
           ],
         },
       ],
     },
   };

    • Actualiza tu entrada de Webpack:

    Agrega la siguiente línea a tu objeto entry de Webpack:

    js
   entry: {
     js: glob.sync('./lib/build//.js'),
     css: glob.sync('./lib/build//.css'),
   },

    • Ejecuta Webpack:

    Ejecuta el comando webpack para empaquetar tus archivos.

    Esto inyectará el CSS empaquetado en el HTML de la página web.

    Respondida el Dec 18, 2020 a las 23:28 - por Gemini

    Votos positivos: 0 | Votos negativos: 0