Webpack anulando la entrada y salida por defecto
[MicroPost] Siguiendo con la guía básica de Webpack en esta micro entrada vamos a aprender a anular los puntos de entrada y salida que tiene Webpack por defecto, recordando que no necesitamos generar un archivo de configuración para lograrlo.
Puntos de entrada y salida
Los puntos de entrada y salida vienen preestablecidos por el zero conf de Webpack, si quieres profundizar un poco más en la configuración puedes visitar la documentación oficial de Webpack.
Si vienes siguiendo la guía o bien ya tienes algo de experiencia con Webpack, sabrás que por defecto el punto de entrada es el siguiente.-
1
./src/index.js
Y el punto de salida.-
1
./dist/main.js
Aun que en mi opinión me parece bien esta estructura de directorios y archivos, podemos modificarlos desde el archivo “package.json”, lo abrimos y modificamos los scripts “dev” y “build” de la siguiente forma.-
1
2
3
4
"scripts": {
"dev" : "webpack --mode development ./src/js/index.js --output ./src/main.js" ,
"build" : "webpack --mode production ./src/js/index.js --output ./src/main.js"
}
Los dos scripts anteriores los declaramos en el articulo Webpack modo de producción y desarrollo te recomiendo que le des una leída.
Donde.-
1
./src/js/index.js
Es el punto de entrada para Webpack y el punto de salida es.-
1
./src/main.js
Para asignar el punto de salida utilizamos el flag –output.
Por ultimo solo queda crear los directorios y el archivo que utilizaras como punto de entrada (los directorios y archivo de salida se generan automáticamente).
Conclusiones
Ahora ya tenemos listos nuestros puntos de entrada y salida personalizados con Webpack, poco a poco vamos ir agregando configuraciones para preparar nuestro entorno de desarrollo para crear aplicaciones con react.
Puedes encontrar el código de ejemplo de este articulo en.-
Si te interesa el tema puedes continuar con los siguientes enlaces.-
- Articulo anterior: Webpack modo de producción y desarrollo
- Articulo siguiente: Webpack trnaspilando código javascipt es6 con babel
- Curso: Curso de Webpack
Que tengan feliz código.