No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de Webpack

Curso de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Optimizaci贸n de Webpack para React

26/28
Recursos

Aportes 21

Preguntas 10

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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鈥ero 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 鈥渋ndent-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. 鈥渨ebpack.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:
鈥渄evelopment鈥 | 鈥減roduction鈥 | 鈥渘one鈥

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(鈥榗ss-minimizer-webpack-plugin鈥);
const TerserPlugin = require(鈥榯erser-webpack-plugin鈥);
const { CleanWebpackPlugin } = require(鈥榗lean-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 鈥榥pm run build鈥 no me estaba generando un mitificado del CSS y cuando ejecuto el 鈥榥pm 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 鈥榮tyle-loader鈥 y lo reemplazamos por el 鈥楳iniCssExtractPlugin.loader鈥 y notaran que al momento de hacer el BUILD se crea el mitificado de CSS en la carpeta 鈥榙ist鈥 y cuando ejecuten 鈥榮tart鈥 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
  }
}