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(),