Webpack es un sistema de módulos de JavaScript que reúne módulos de su proyecto y los compila en uno o más paquetes. Reactjs es una biblioteca de JavaScript que se utiliza para construir interfaces de usuario. Ambos pueden utilizarse juntos para construir aplicaciones web robustas y eficientes.
Aquí están los pasos para usar Webpack con Reactjs:
1. Instalar Node.js y npm: Antes de comenzar, necesita tener Node.js y npm instalados en su computadora. Puede descargar e instalar Node.js de su sitio web oficial. npm viene con Node.js, así que cuando instale Node.js, también obtendrá npm.
2. Crear un nuevo proyecto: A continuación, cree una nueva carpeta para su proyecto e inicialice un nuevo proyecto de Node.js ejecutando los siguientes comandos en la línea de comando:
```bash
mkdir webpack-react-tutorial && cd webpack-react-tutorial
npm init -y
```
3. Instalación de React y React DOM: Usar npm para instalar react y react-dom:
```bash
npm install react react-dom
```
4. Instalar Babel:
Babel es un transpilador que convierte el código ES6/ES7 a ES5. Como vamos a escribir nuestro código en ES6/ES7, necesitamos Babel para asegurarnos de que nuestro código funcione en navegadores que no soportan ES6/ES7.
```bash
npm install babel/core babel/preset-env @babel/preset-react babel-loader
```
5. Instalar Webpack: Usar npm para instalar webpack, webpack-cli (una interfaz de línea de comandos para webpack) y webpack-dev-server (un servidor en vivo para webpack):
```bash
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin
```
6. Configurar Babel: Cree un archivo `.babelrc` en la raíz del proyecto y agregue la siguiente configuración para usar los preajustes ya instalados:
```json
{
“presets”: [“@babel/preset-env”, “@babel/preset-react”]
}
```
7. Configurar Webpack: Cree un archivo `webpack.config.js` en la raíz del proyecto y agregue lo siguiente:
```javascript
const path = require(‘path’);
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
module.exports = {
entry: ‘./src/index.js’,
output: {
path: path.join(__dirname, ‘/dist’),
filename: ‘bundle.js‘
},
module:{
rules:[
{
test: /\.js$/,
exclude: /node_modules/,
use:{
loader: ‘babel-loader‘
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: ‘./src/index.html‘
})
]
}
```
8. Crear un componente React: En tu carpeta src, crea los archivos `index.js` e `index.html`. En `index.js`, crea un componente de React simple. En `index.html`, sólo necesitas un div con un id de root.
9. Modificar el script de inicio en package.json:
```json
{
//…
“scripts”: {
“start”: “webpack-dev-server —mode development —open —hot”,
“build”: “webpack —mode production“
}
//…
}
```
10. Inicie el servidor de desarrollo: Ahora puedes ejecutar `npm start` para iniciar el servidor de desarrollo. Tu aplicación debe ser visible en `http://localhost:8080`.
Así es como puedes usar Webpack con Reactjs para crear aplicaciones web. Pero si quieres crear una nueva aplicación react, te recomendaría usar `create-react-app`, que ya viene con toda esta configuración. Pero si quieres tener un control más completo sobre la configuración, entonces usar webpack y babel manualmente como se describió anteriormente es el camino a seguir.
