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

Webpack en modo desarrollo

15/28
Recursos

Aportes 17

Preguntas 2

Ordenar por:

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

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

el bebeloper se escucha por ahi xd

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

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 鈥渨ebpack.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',
}```

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(鈥榗ss-minimizer-webpack-plugin鈥);
const TerserPlugin = require(鈥榯erser-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",

馃憣

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

鈥渟cripts鈥: {
鈥渢est鈥: 鈥渆cho 鈥淓rror: no test specified鈥 && exit 1鈥,
鈥渂uild鈥: 鈥渨ebpack --mode production鈥,
鈥渄ev鈥: 鈥渨ebpack --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

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 鈥渨ebpack.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 鈥渁ctivada la configuraci贸n鈥 agregamos en el archivo:
mode: "development", //Asi le decimos que tiene la configuraci贸n espec铆fica para 
//este modo
  • Ahora en 鈥減ackage.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.