Webpack & React | Fazt.dev

Webpack & React | Fazt.dev

En este tutorial te voy a enseñar como configurar un proyecto de React desde cero usando Webpack como empaquetador de modulos.

Posiblemente te estes preguntando el Porque, esto es basicamente porque muchos proyectos aun posee configuraciones personalizadas de React o algunos proyectos crean Widgets, asi que este es un tutorial de iniciacion para aquellos que buscan esas caracteristicas.

Estructura inicial del Proyecto

Primero creemos nuestro proyecto:

mkdir react-webpack-boilerplate
cd react-webpack-boilerplate

npm init -y

npm i webpack webpack-cli

Esta es la estructura inicial de nuestro proyecto:

.
├── dist
├── node_modules
├── package.json
├── package-lock.json
└── src
    └── index.js

en index.js colocaremos:

console.log('Hello world')

Luego para compilar usaremos:

npx webpack

Creando Scripts

para poder ejecutar los scripts de una mejor manera, actualizaremos nuestro package.json:

{
  "name": "react-webpack-boilerplate",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "webpack-cli": "^4.10.0",
    "wepback": "^1.0.0"
  },
  "scripts": {
    "start": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Ahora tenemos dos scripts para ejecutar en modo produccion y en desarrollo:

npm run build # production
npm start # development

Una vez esten compilados podremos ejecutar:

node dist/main.js

Añadiendo React

Instalaremos ahora las dependencias de React:

npm install react react-dom

Tambien las de Babel:

npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react

crearemos un archivo babel.config.json para poder configurar babel, y un archivo webpack.config.js para poder configurar webpack.

en wepback.config.js crearemos:

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
};

y en babel.config.json:

@babel/preset-env must be set to target esmodules in order to use the latest Node modules. Also, defining the JSX runtime to automatic is needed, since React 18 has adopted the new JSX Transform functionality:

https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

Ahora añadiremos en el archivo index.js lo siguiente:

import ReactDOM from "react-dom/client";

function App() {
  return <h1>Rick and Morty</h1>;
}

const container = document.getElementById("app");
const root = ReactDOM.createRoot(container);

root.render(<App />);

Tambien crearemos una carpeta public al mismo nivel de src, con un archivo index.html adentro

<!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>React Webpack</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

dejando nuestra estructura de esta forma:

.
├── babel.config.json
├── dist
│   └── main.js
├── node_modules
├── package.json
├── package-lock.json
├── public
│   └── index.html
├── src
│   └── index.js
└── webpack.config.js

Para poder hacer que webpack lea nuestro index.html usaremos:

npm install --save-dev html-webpack-plugin

Y actualizaremos nuestro archivo de webpack de la siguiente forma:

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "./index.html",
    }),
  ],
};

Creando un Servidor de Desarrollo

Luego instalaremos el modulo de servidor de webpack:

npm install --save-dev webpack-dev-server

Actualizaremos el package.json de la siguiente forma apra que ejecute el servidor de desarollo cuando ejecutemos el comando npm start:

{
  ...
  "start": "webpack serve --mode development",
  ...
}

si ejecutamos luego:

npm start

este ejecutará un servidor en el puerto 8080.

Añadir estilos

npm install --save-dev css-loader style-loader

  const HtmlWebpackPlugin = require('html-webpack-plugin');
  module.exports = {
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
          },
        },
+       {
+         test: /\.css$/,
+         use: ['style-loader', 'css-loader'],
+       },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './public/index.html',
        filename: './index.html',
      }),
    ],
  };

Añadir ESLint

npm install --save-dev eslint eslint-webpack-plugin eslint-plugin-react

Luego crearemos un archivo .eslintrc, usando el comando:

eslint --init

{ "env": { "browser": true, "node": true, "es6": true }, "parserOptions": { "ecmaVersion": 2020, "sourceType": "module" }, "plugins": ["react"], "extends": ["eslint:recommended", "plugin:react/recommended"], "rules": { "react/react-in-jsx-scope": "off" } }

actualizaremos el archivo webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');

const ESLintPlugin = require('eslint-webpack-plugin'); module.exports = { // ... plugins: [ new HtmlWebpackPlugin({ template: './public/index.html', filename: './index.html', }),
```
new ESLintPlugin(),
```
], };