Optimización de Webpack para React

generador de proyectos hace que webpack sea menos tedios en temas de configuracion, te genera practicamente todo, saludos

Cabe resaltar que:
La dependencia de MiniCssExtractPlugin es para el modo de produccion, el cual reemplaza la de style-loader.

{
        test: /\.s[ac]ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
}

⚡ Dependencias de optimización

#NPM
npm install -D css-minimizer-webpack-plugin terser-webpack-plugin clean-webpack-plugin
# YARN
yarn add -D css-minimizer-webpack-plugin terser-webpack-plugin clean-webpack-plugin

Recuerden que en vez de usar el Plugin

new CleanWebpackPlugin()

Pueden utilizar el clean nativo de Webpack. Aquí les dejo la documentación.
Con el clean quedaría:

module.exports = {
...
output: {
  clean: true,
 }
}

Cabe recalcar que a partir de Webpack 5 terser-webpack-plugin ya viene incluido y basta con requerirlo en configuración.

Quede decepcionado del curso, no es malo. Pero no introdujo las dynamic link library (DLL) por ejemplo.

Me habia asustando al ver que empezaban con react , ya que el curso de react no esta antes de este curso en la carrera de javascript y no habia visto nada…pero esta super bien aplicado la dinamica del curso.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js',
        publicPath: '/'
    },
    resolve: {
        extensions: ['.js', '.jsx'],
        alias: {
            "@components": path.resolve(__dirname, 'src/components/'),
            "@styles": path.resolve(__dirname, 'src/styles/')
        }
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.html$/,
                use: {
                    loader: 'html-loader'
                }
            },
            {
                test: /\.s[ac]ss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/public/index.html',
            filename: 'index.html'
        }),
        new MiniCssExtractPlugin({
            filename: '[name].css'
        }),
        new CleanWebpackPlugin()
    ],
    optimization: {
        minimize: true,
        minimizer: [
            new CssMinimizerWebpackPlugin(),
            new TerserWebpackPlugin()
        ]
    }
}

Esta última sección es oro

Por sias, si desean el plugin que usa Oscar para dar colores a sus Tabs en cada pestaña del proyecto, se llamada “indent-rainbow” en el Marketplace de VSCode.

estuvo super genial el curso

Hay que instalar los paquetes para optimizar todo instalando:

npm install -D css-minimizer-webpack-plugin terser-webpack-plugin clean-webpack-plugin -D

Ahora hay que crear nuestro webpack para el modo desarrollo. “webpack.config.dev.js”

Pegamos todo y del original eliminamos el server para ahora si configurar todo lo que vamos a instalar:

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const {cleanWebpackPlugin} = require('terser-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

Despues los alias:

alias:{
        '@components': path.resolve(__dirname,'src/components/' ),
        '@styles': path.resolve(__dirname, 'src/styles')
    }

Despues la parte de optimizado:

optimization:{
      minimize:true,
      minimizer:[
          new CssMinimizerPlugin(),
          new TerserPlugin()
      ]
  }

Ahora solo queda configurar el package```

26.-Optimización de Webpack para React

.
Vamos a optimizarlo con algunas dependencias que ya usamos. Que nos ayudarán a trabajar css, optimizar JS y limpiar el recurso cuando generemos el build para producción.
.

• Los instalamos:

  npm install css-minimizer-webpack-plugin terser-webpack-plugin -D
  

• Creamos el webpack.config para modo de desarrollo y hacemos las configuraciones que ya hemos hecho anteriormente.

"start": "webpack serve --config webpack.config.dev.js",
"build": "webpack --config webpack.config.js"

Una pequeña situación: Al final la idea es probar que todo funcione, tanto el npm run build como el start, en mi caso, cuando lanzaba el start me genera el siguiente error:
configuration.mode should be one of these:
“development” | “production” | “none”

Lo que hice fue ponerle la banderita de development al script, quedó de la siguiente forma:

"start": "webpack serve --mode development  --config webpack.config.dev.js",

Y también a la del build:

"build": "webpack --mode production --config webpack.config.js"

Si eso les pasó, espero les sirva, saludos
#NuncaParesDeAprender

Estamos llegando al final del curso Y por fin entendi.
Gracias por esta seccion de ejemplo practico de todo lo aprendido Porfesor