A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Curso de Webpack

Curso de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Optimizaci贸n de Webpack para React

26/28
Recursos

Aportes 16

Preguntas 7

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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鈥ero 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 鈥渋ndent-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. 鈥渨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```

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:
鈥渄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

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