Optimización de Webpack para React

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

⚡ 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

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'
        ]
}

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.

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.

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.

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

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

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```

Esta última sección es oro

estuvo super genial el curso

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

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

Optimización de Webpack para React
Instalamos css-minimezer-webpack-plugin para poder copilar el css a la hora de mandarlo a produccion.
#NPM
npm install -D css-minimizer-webpack-plugin

Terser minifica el codigo js, por defecto ya viene incluido en webpack v5 pero si quieres poner una config por defecto tendras que instalar los plugins.
terser-webpack-plugin

clean-webpack-plugin: Cuando nosotros vayamos exportando a producción assets, este módulo nos ayuda a limpiar nuestro folder donde están los bundles.2
clean-webpack-plugin

YARN

yarn add -D css-minimizer-webpack-plugin terser-webpack-plugin clean-webpack-plugin

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

plugins: [
new HtmlWebpackPlugin({
template: ‘./public/index.html’,
filename: ‘./index.html’
}),
new MiniCssExtractPlugin({
filename: ‘[name].css’
}),
new CleanWebpackPlugin(),
],
optimization: {
minimize: true, activamos esta opcion css-minimizer… para poder usarlo en modo desarrollo tmb
minimizer: [
new CssMinimizerPlugin(),
new TerserPlugin(),
]
}

Les dejo el repositorio del profe para que comparen con su proyecto en caso de tener un error:

https://github.com/platzi/curso-webpack-react/tree/react/04

mi error fue que no tenía instaladas las dependencias de reac y react-dom

no recuerdo que se hayan instalado.

Me di cuenta que al momento de ejecutar el comando ‘npm run build’ no me estaba generando un mitificado del CSS y cuando ejecuto el ‘npm run start’ en la pagina note, que en el HEAD no estaba en un LINK de CSS, ósea no estaba separado del HTML, que hasta donde tengo entendido es mala practica tener el CSS en el mismo HTML. así que la solución para separar el CSS del HTML fue esta.

test: /\.(css|scss)$/,
use: [
	MiniCssExtractPlugin.loader,
	'css-loader',
	'sass-loader'
]

Eliminamos el ‘style-loader’ y lo reemplazamos por el ‘MiniCssExtractPlugin.loader’ y notaran que al momento de hacer el BUILD se crea el mitificado de CSS en la carpeta ‘dist’ y cuando ejecuten ‘start’ se fijan que en el HEAD ya se crea el LINK de CSS.

Se viene deploy para webpack con React B)

con ayuda de otros compañeros acá, webpack ya permite limpiar y optimizar sin tener que instalar ninguna dependencia.

para limpiar

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

para optimizar

module.exports = {
...
optimization: {
    minimize: true
  }
}