Webpack + React 17, sin create-react-app ⚛
Tags: react, webpack, babel, spanish
Published: 2021-11-08 15:26:08

En mi post [Webpack para torpes🧐](https://dev.to/duxtech/webpack-para-torpes-l7b) se explicaron los conceptos básicos y fundamentales para configurar webpack desde 0.
En dicho post se logró configurar un proyecto sencillo sin ninguna librería o framework frontend moderno, simplemente manipulando archivos `.html`, `.css` y `.js`.

Para que puedas comprender cómo agregarle React a nuestra configuracion basica, es menester que puedas llegar a escribir y entender que hace el siguiente código:

```js
//webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //dependencia instalada via npm

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
  mode: 'production',
  module: {
      rules: [
         {
            test: /\.css$/i,
            use: ["style-loader", "css-loader"],
         },
     ],
  },
  // más reglas...
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
  // más plugins...
};

```
> *Este código está escrito y explicado como bien mencioné en el post [Webpack para torpes🧐](https://dev.to/duxtech/webpack-para-torpes-l7b), te recomiendo leer ese post y luego recién empezar con este.*

## **Instalando Babel**
Antes de instalar React, en necesario instalar y configurar [Babel](https://babeljs.io/)

Necesitamos las siguientes dependencias:
```js
npm i @babel/core @babel/cli @babel/preset-env @babel/preset-react babel-loader
```

En la raíz del proyecto procedemos a crear `.babelrc` que será nuestro archivo de configuración de Babel

```js
{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}
```
> *En este archivo solo indicamos que usaremos el preset anteriormente instalado*

Ahora necesitamos configurar babel en el archivo `webpack.config.js`;

En nuestro arreglo `rules` añadimos una nueva regla:

```js
    module: {
        rules: [
            {
                test:/\.(js|jsx)$/i,
                use: ["babel-loader"],
                exclude: /node_modules/,
            },
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },

        ],
    },
```
Y antes de `module` establecemos las extensiones que debe entender el proyecto

```js
    resolve:{
        extensions :['.js', '.jsx']
    },
    module: {
        rules: [
            {
                test:/\.(js|jsx)$/i,
                use: ["babel-loader"],
                exclude: /node_modules/,
            },
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },

        ],
    },
```
Eso es todo, ahora procedemos a instalar react:

```js
npm i react react-dom
```

Nuestro `index.html`
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>Hola</h1>
        <p>Como estas?</p>
    </div>
</body>
</html>
```
El `index.js`:
```js

import React from 'react';
import {render} from 'react-dom'

render(<h1>Hola</h1>, document.getElementById('app'))
```

El codigo final de la configuración de webpack se veria asi:
```js
//webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //dependencia instalada via npm

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    mode: 'development',
    devServer:{
        port: 4000
    },
    resolve:{
        extensions :['.js', '.jsx']
    },
    module: {
        rules: [
            {
                test:/\.(js|jsx)$/i,
                use: ["babel-loader"],
                exclude: /node_modules/,
            },
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },

        ],
    },
    plugins: [
        new webpack.ProgressPlugin(),
        new HtmlWebpackPlugin({ template: './src/index.html' }),

    ],
};

```

Y el `package.json` con todas las dependencias:
```js
{
  "name": "react-webpack-config",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/cli": "^7.15.4",
    "@babel/core": "^7.15.5",
    "@babel/preset-env": "^7.15.4",
    "@babel/preset-react": "^7.14.5",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "style-loader": "^3.2.1",
    "webpack": "^5.52.0",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.1.1"
  }
}

```

Esto es todo!

Te dejo el codigo en un repo de github para que lo puedas ver mejor

{% github crisdux/react-webpack-config %}

## **Referencias**
* React & Webpack | Configuración desde Cero
{% youtube oT0gGgqJl1s %}

---

Más post de mi autoría:
{% link https://dev.to/duxtech/workspace-recomendado-para-testing-en-react-17-jest-enzyme-4ih9 %}
{% link https://dev.to/duxtech/8-herramientas-gratuitas-de-desarrollo-web-frontend-que-posiblemente-no-conocias-46kj %}
{% link https://dev.to/duxtech/local-storage-api-en-javascript-o88 %}