Cómo usar Webpack con React JS

Webpack es una poderosa herramienta para agrupar su aplicación Javascript. Es gratuito y de código abierto; puede agrupar toda su aplicación JavaScript en un solo archivo. Principalmente, el paquete web está creado sólo para aplicaciones javascript, pero también puede transformar recursos frontend como HTML, CSS e imágenes con la ayuda de los cargadores correspondientes. Ventajas de usar Webpack Hay varias ventajas de usar un webpack, algunas de las cuales son las siguientes: – Gestión de dependencias: – Gestiona automáticamente las dependencias, reduciendo el riesgo de conflictos de versiones y simplificando la gestión de la estructura del proyecto. Implementación más rápida: – Después de agrupar el proyecto, tenemos menos archivos para implementar, lo que hace que el proceso de implementación sea más rápido. Puede transpilar las últimas funciones de Javascript para garantizar la compatibilidad con entornos más antiguos. Configurando el proyecto React con Webpack Ahora, configuraremos un proyecto React desde cero con la configuración del paquete web (requisito: node y npm deben estar instalados en el sistema) Paso 1: cree una nueva carpeta y ejecute el siguiente comando en la terminal: – npm init -y # O Yarn init -y Generará el archivo package.json con algunas entradas { «name»: «test-webpack», «version»: «1.0.0», «description»: «», «main»: » index. js», «scripts»: { «test»: «echo \»Error: no se especificó ninguna prueba\» && salida 1″ }, «palabras clave»: [], «author»: «», «license»: «ISC» } Paso 2: Ahora instale Webpack y Babel npm i webpack webpack-cli webpack-dev-server –save-dev # O hilo i webpack webpack-cli webpack – dev-server –save-dev Paso 3: Instale el paquete principal de Babel y sus ajustes preestablecidos npm i @babel/core @babel/preset-env @babel/preset-react # O Yarn i @babel/core @babel/preset – env @babel/preset-react Paso 4: Instale el complemento HTML de Webpack para crear automáticamente un archivo HTML que sirva el archivo javascript generado por webpack. npm i html-webpack-plugin –save-dev # O Yarn i html-webpack-plugin –save-dev Paso 5: Instalar cargadores (esto se puede cambiar según los requisitos del proyecto) npm i babel-loader style-loader css -loader –save-dev # O hilo i babel-loader style-loader css-loader –save-dev Paso 6: Ahora, para configurar reaccionar, instalar reaccionar y reaccionar-dom npm i reaccionar reaccionar-dom — guardar # O hilo reacciono reaccionar-dom –save Paso 7: Ahora cree una carpeta src y agregue los siguientes archivos. // index.html Reaccionar aplicaciones

// App.js importa React desde ‘react’; aplicación constante = () => {retorno (

¡Bienvenidos a Reaccionar!

); } exportar aplicación predeterminada; //index.js importa Reaccionar desde «react»; importar ReactDOM desde «react-dom»; importar la aplicación desde «./App»; ReactDOM.render(, document.getElementById(‘raíz’)); Paso 8: Ahora cree un archivo webpack.config.js en el directorio raíz del proyecto y agregue el siguiente código const path = require(‘path’) const HtmlWebpackPlugin = require(‘html-webpack-plugin’) module.exports = { «entrada»: «./src/index.js», «salida»: { ruta: ruta.resolve(__dirname, ‘dist’), nombre de archivo: «bundle.js» }, módulo: { reglas: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: «babel-loader»
},
{
test: /\.css$/,
use: [
{
loader: «style-loader»
},
{
loader: «css-loader»
}
] } ]}, complementos: [
new HtmlWebpackPlugin({
template: «./src/index.html»
})
] } Paso 9: cree un archivo .babelrc en el directorio raíz de su proyecto y agregue el siguiente código { «presets»: [«@babel/preset-env», «@babel/preset-react»] } Paso 10: Ahora, finalmente, edite la sección de script del archivo package.json y agregue «start»: «webpack-dev-server –mode development –open –hot», «build»: «webpack – – config webpack.config.js» Paso 11: Ahora ejecute el proyecto mediante el comando ‘npm start’ o ‘yarn start’. Esto iniciará el servidor de desarrollo del paquete web. Aquí, las opciones abierta y activa abren respectivamente la aplicación de reacción en el navegador y habilitan la recarga en caliente. Paso 12: Ejecute el comando de compilación a través de “npm run build” o “yarn run build” para obtener la carpeta dist que contiene el archivo JS y HTML normal incluido. Extraiga la carpeta dist y ejecútela como un proyecto HTML, CSS y JS estático haciendo clic directamente en el archivo index.html o ejecutándolo desde cualquier servidor como el servidor en vivo de vs-code. Convierta el servidor node js en un solo archivo Ahora convertiremos nuestro servidor node js en un solo archivo usando Webpack. Paso 1: descargue ‘webpack’ y ‘webpack-cli’ en su proyecto npm install –save-dev webpack webpack-cli # O Yarn install –save-dev webpack webpack-cli Paso 2: luego agregue el script de compilación todo dentro el archivo package.json de su proyecto «scripts»: { «build»: «webpack –config webpack.config.cjs», } Paso 3: cree el archivo webpack.config.cjs en el directorio raíz de su proyecto y escriba lo siguiente archivo de código ruta constante = require(‘ruta’); module.exports = {entrada: ‘./index.js’, salida: {ruta: path.resolve(__dirname, ‘./bundle’), nombre de archivo: ‘server.js’, }, resolución: {extensiones: [‘.js’] }, destino: ‘nodo’, estadísticas: ‘solo errores’ } Paso 4: Ejecute ‘npm run build’ o ‘yarn build’ a través de la terminal. Se generará una carpeta estática llamada «paquete». Paso 5: Ahora abra la carpeta del paquete en la terminal, puede ver que la carpeta del paquete contiene dos archivos, uno es server.js (salida: nombre del archivo) y otro es server.js.LICENSE.txt. Para ejecutar el servidor, ejecute el siguiente comando que inicializará el archivo package.json dentro de la carpeta del paquete. npm init # OR Yarn init // ahora, node js hace las siguientes preguntas nombre del paquete: (paquete) versión: (1.0.0) descripción: punto de entrada: (server.js) comando de prueba: repositorio git: palabras clave: autor: licencia : (ISC) y ¿Está bien? (sí) // se genera el archivo package.json. Ahora puede ejecutar el archivo server.js Paso 6: Ejecute el archivo del servidor de una sola página escribiendo el siguiente comando node server.js # O Yarn server.js Paso 7: Ahora puede ver que el archivo server.js está funcionando. También puede colocar el archivo env en la carpeta del paquete para proporcionar al servidor las variables de entorno necesarias. Nota: Para una mejor práctica, antes de agrupar su aplicación, mueva el archivo .env y el archivo de entrada del servidor node js al directorio raíz. Paso 8: disfruta de la agrupación. Conclusión Webpack simplifica el proceso de gestionar dependencias y agrupar varios archivos en uno, mejorando el rendimiento general de la aplicación. Además, los desarrolladores pueden optimizar su código para obtener mejores tiempos de carga y una mejor experiencia de usuario. Para obtener más información, visite el sitio web oficial de Webpack. Comience su desarrollo sin cabeza con Webkul.

About Francisco

Check Also

El futuro de las apps de vídeos cortos #Infografía

El futuro de las aplicaciones de vídeos cortos es brillante, con rápidos avances tecnológicos y …

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *