Webpack en modo desarrollo

Dejo esta lectura que habla de los diferentes modos de webpack y que implican ciertas configuraciones

• webpack 4: mode and optimization

Webpack en modo desarrollo

• Creamos un nuevo archivo:
  webpack.config.dev.js
• Copiamos todo lo de webpack.config.js a el archivo que acabamos de crear.
• Borramos o comentamos el siguiente código, ya que no necesitamos optimizar para el modo de desarrollo (Queremos ver cuando funcionan las cosas).

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

También borramos o comentamos por la misma razón:

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin')

• Seguido del atributo output añadimos:

output: {
},
mode: 'development',

• En package.json:

"dev": "webpack --config webpack.config.dev.js" 

• y ejecutamos npm run dev

el bebeloper se escucha por ahi xd

Otra cosa que podemos optimizar en desarrollo para visualizar mejor los archivos, sería eliminar los hashes y recibir un build así:

😎

oww al fondo se oyó al bebeloper.

OJO: con el nombre de web pack que dure 30min buscando el error hasta que veo que escribo wepback.config.dev.js

Webpack tiene el modo de produccion y el de desarrollo.

Para entender mejor el modo desarrollo vamos a configurar un archivo de configuracion especifico de desarrollo y poder optimizar este proceso.

Tenemos que crear un nuevo archivo de configuracion para poder separar las configuracioens de este con el modo de produccion. Este archivo se llamara “webpack.config.dev.js”

Como no es necesario optimizar podemos eliminar el apartado de Optimization,

Lo que podemos es decirle que esto solo es para el modo desarrollo, asi que antes del resolve podemos agregar:

mode:'development',

Ahora en el package.json tenemos que configurar nuestro comando que optimizamos, cambiando el de modo dev con:

"dev": "webpack --config webpack.config.dev.js"

Es recomendable crear un archivo único para ejecutar Webpack en modo desarrollo y otro en modo producción. Para esto creamos un nuevo archivo llamado webpack.config.dev.js

En un entorno de desarrollo no es necesario que optimicemos el bundle, por lo que podemos eliminar los plugins que servían para esto. Además agregamos la propiedad mode al archivo con el valor development para que se ejecute en modo desarrollo.

Ahora hay que modificar el comando para crear el bundle de desarrollo dentro de package.json.

Para hacer que use un archivo de configuración en específico agregamos al comando Webpack lo siguiente: webpack--config webpack.config.dev.js.

module.exports = {
mode: 'development',
}```

15.-Webpack en modo desarrollo

.
Vamos a configurar el archivo de configuración para desarrollo y así optimizar el proceso.

• Creamos otro archivo de configuración para separar las config de desarrollo de las de producción. Le llamamos “webpack.config.dev.js”.
• Copiamos todo lo que está en el archivo de configuración que habíamos hecho previamente y lo pegamos en el nuevo archivo. Como no necesitamos optimizar en modo de desarrollo, borramos esa parte de la configuración.
• Para poder tener “activada la configuración” agregamos en el archivo:

mode: "development", //Asi le decimos que tiene la configuración específica para 
//este modo

• Ahora en “package.json” modificamos de “-mode production” a:

"scripts": {
    "dev": "webpack --config webpack.config.dev.js"
  },
//Así ya tenemos la estructua que nos permite trabajar con modo desarrollo. 

• Ejecutamos el comando.

Guide Webpack Development Mode

1.- Crea el archivo webpack.config.dev.js
2.- Copia el código de tu archivo webpack.config.js a excepción de los módulos de optimización

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

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

3.- Se agrega el la línea de código mode: development:

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    assetModuleFilename: 'assets/images/[hash][ext][query]'
  },

// Agregamos: mode: 'development'
  mode: 'development',

4.- En package.json le decimos que utilice este documento para el modo desarrollo

"dev": "webpack --config webpack.config.dev.js",

👌

si tienen un error con el nuevo sript, solo chequeen la ubi del archivo
webpack.config.dev.js, eso es todo. En mi caso no me funciona como lo tiene el profesor y lo coloqué así

	"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1",
		"build": "webpack --mode production",
		"dev": "webpack --config src/utils/webpack.config.dev.js"
	},
	"repo

ostia! el bebeloper de fondo haha

Webpack en modo desarrollo
En este caso realizamos estamos cambios para el modo desarrollo.

Pasa nuestro archivo webpack.config.js a webpack.config.dev.js
Además se agrega en el archivo la configuración del entorno en modo dev

 mode: 'development'```

Cambios en el package.json

“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“build”: “webpack --mode production”,
“dev”: “webpack --config wenbpack.config.dev.js”
},

Bebeloper is life, Bebeloper is love

Es importante en todas las implementaciones que hagamos, tener muy claro la diferenciación entre ambientes de dev (desarrollo) y prod (producción).

estre paso me soluciono el problema de stylus no entiendo porque razon pero si alguien le sigue pasando el problema de stylus aca esta la solucion