Configuración de Webpack 5 con loaders y estilos

Snippet actualizado para css

{
	// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }

	"webpack config": {
		"prefix": "wpc",
		"body": [
		  "const path = require(\"path\");",
		  "const HtmlWebpackPlugin = require(\"html-webpack-plugin\");",
		  "const MiniCssExtractPlugin = require('mini-css-extract-plugin');",
		  "",
		  "module.exports = {",
		  "    entry: \"./src/index.js\",",
		  "    output: {",
		  "      path: path.resolve(__dirname, \"dist\"),",
		  "      filename: \"bundle.js\",",
		  "    },",
		  "    resolve: {",
		  "      extensions: [\".js\", \".jsx\"],",
		  "    },",
		  "    module: {",
		  "      rules: [",
		  "        {",
		  "          test: /\\.(js|jsx)$/,",
		  "          exclude: /node_modules/,",
		  "          use: {",
		  "            loader: \"babel-loader\",",
		  "          },",
		  "        },",
		  "        {",
		  "          test: /\\.html$/,",
		  "          use: [",
		  "            {",
		  "              loader: \"html-loader\",",
		  "            },",
		  "          ],",
		  "        },",
		  "        {",
		  "            test: /\\.css$/,",
		  "            use:[",
		  "                {",
		  "                    loader: MiniCssExtractPlugin.loader,",
		  "                },",
		  "                'css-loader'",
		  "            ]",
		  "        }",
		  "      ],",
		  "    },",
		  "    plugins: [",
		  "      new HtmlWebpackPlugin({",
		  "        template: \"./public/index.html\",",
		  "        filename: \"./index.html\",",
		  "      }),",
		  "",
		  "      new MiniCssExtractPlugin({",
		  "          filename: 'assests[name].css',",
		  "      })",
		  "    ],",
		  "    devServer: {",
		  "      contentBase: path.join(__dirname, \"dist\"),",
		  "      compress: true,",
		  "      port: 3005,",
		  "    },",
		  "  };"
		],
		"description": "webpack config html and css"
	  }
}```

Comando para instalar el plugin para css:

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

Por si desean ponerle Sass:

1. Instalar node-sass y sass-loader

npm install sass-loader node-sass

1. Agregar a las reglas de estilos lo siguiente:

{
                test: /\.(s*)css$/,
                use: [ 
                    {

                        loader: MiniCssExtractPlugin.loader,
                    },
                    'css-loader',
                    'sass-loader',
                ],
            },

Los plugins quedan igual, porque solo se debe cargar el loader de sass.

Muchas clases enfocadas en la configuración de webpack, el curso debió enfocarse en explicar mejor cada hook, tanto en teoría como en diferentes escenarios para sus usos.

No cuanto tiempo en configurar esto, mejor cra o vite hoy en dia.

para los que quieran sass en su proyecto:

npm i sass
npm i -D sass-loader css-loader mini-css-extract-plugin

Porque en las ultimas versiones de react al hacer el proceso del bundle nos sale el warning de que el bundle esta muy pesado ?

webpackconfig.js
css

 {
        test: /\.css$/,
        use: [
            {
                loader: MinicssExtractPlugin.loader,
            },
            'css-loader'
        ]
      }

new MinicssExtractPlugin({
        filename: 'assets/[name].css',
    })

Les facilito la documentación de mini-css-extract-plugin para que puedan profundizar en su uso.

Pueden colocar [hash] para que se agregue un hash automático en el nombre del archivo de la siguiente forma

new MiniCssExtractPlugin({
  filename: 'assets/[name].[hash].css'
})

Si tienen un error en babel, por el preset ,
Reemplacen el nombre de este archivo
.babelrc
por
babel.config.json

Por si alguien está haciendo este curso en 2023, aca dejo mi webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'), 
        filename: 'bundle.js'
    },
    mode: 'development',
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader'
          }
        ]
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: './index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'assets/[name].css',
    })
  ],
  devServer: {
    static: path.join(__dirname, "dist"), 
    compress: true,
    port: 3005,
  }
};

Como lo hacia el profe me tiraba unos warnings y no me cargaba el css, pero san stack-overflow me salvó

Si les da algun error de memoria, pueden agrgar lo siguiente a la configuracion de webpack:

performance: {
    hints: false,
    maxEntrypointSize: 512000,
    maxAssetSize: 512000,
  },

No sería una mejor idea crear un curso de creación y configuración de proyectos con React de manera personalizada? vienes con las ganas de aprender sobre Hooks y tardas mucho tiempo configurando el proyecto

No me funciona la minificación del css cuando ejecuto npm run build, ¿alguna idea de que puede ser o si a alguien mas le pasa?

¡Hola! ¿Cómo puedo integrar en webpack algún proyecto que haya hecho con styled-components en lugar de css?

n