22 de febrero de 2021
React.js | Configuración con Webpack 5 y Babel 7 - Tutorial Actualizado
Aprende a usar la última versión de Webpack configurando un proyecto de React desde cero.
Muestro cómo crear un empaquetado óptimo para producción y las herramientas que podemos usar en tiempo de desarrollo como webpack-dev-server y fast refresh.
✔ Contenido:
Configuración inicial
Iniciar proyecto npm e instalar webpack
Configuración básica de webpack
Configuración de babel y core-js
html-clean-plugin y html-webpack-plugin
Configuración de css, sass e imágenes
webpack-dev-server
react fast refresh
source maps
Code splitting y optimizaciones
👀 Les sugiero pongan el video en 1080p para que puedan ver el contenido con nitidez.
🔔 Suscríbete al canal y activa la campanita para que no te pierdas ningún video:
https://www.youtube.com/yoelvism?sub_confirmation=1
🐦Sígueme en twitter:
https://twitter.com/ymulenll
👨💻 Código fuente:
https://github.com/ymulenll/react-webpack5-boilerplate
📌Enlaces:
https://nodejs.org/en/
https://webpack.js.org/concepts/
https://babeljs.io/
https://webpack.js.org/configuration/resolve/#resolveextensions
https://www.npmjs.com/package/sass-loader
https://webpack.js.org/configuration/dev-server/
https://github.com/pmmmwh/react-refresh-webpack-plugin
https://webpack.js.org/configuration/devtool/
https://webpack.js.org/guides/code-splitting/#entry-points
https://webpack.js.org/plugins/mini-css-extract-plugin/
Muchas gracias por ver este video, espero le haya sido útil.
Muestro cómo crear un empaquetado óptimo para producción y las herramientas que podemos usar en tiempo de desarrollo como webpack-dev-server y fast refresh.
✔ Contenido:
Configuración inicial
Iniciar proyecto npm e instalar webpack
Configuración básica de webpack
Configuración de babel y core-js
html-clean-plugin y html-webpack-plugin
Configuración de css, sass e imágenes
webpack-dev-server
react fast refresh
source maps
Code splitting y optimizaciones
👀 Les sugiero pongan el video en 1080p para que puedan ver el contenido con nitidez.
🔔 Suscríbete al canal y activa la campanita para que no te pierdas ningún video:
https://www.youtube.com/yoelvism?sub_confirmation=1
🐦Sígueme en twitter:
https://twitter.com/ymulenll
👨💻 Código fuente:
https://github.com/ymulenll/react-webpack5-boilerplate
📌Enlaces:
https://nodejs.org/en/
https://webpack.js.org/concepts/
https://babeljs.io/
https://webpack.js.org/configuration/resolve/#resolveextensions
https://www.npmjs.com/package/sass-loader
https://webpack.js.org/configuration/dev-server/
https://github.com/pmmmwh/react-refresh-webpack-plugin
https://webpack.js.org/configuration/devtool/
https://webpack.js.org/guides/code-splitting/#entry-points
https://webpack.js.org/plugins/mini-css-extract-plugin/
Muchas gracias por ver este video, espero le haya sido útil.