En mi post Webpack para torpes🧐 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:
//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🧐, te recomiendo leer ese post y luego recién empezar con este.
Instalando Babel
Antes de instalar React, en necesario instalar y configurar Babel
Necesitamos las siguientes dependencias:
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
{
"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:
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
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:
npm i react react-dom
Nuestro index.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:
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:
//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:
{
"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
crisdux
/
react-webpack-config
Proyecto de configuracion basica de react usando webpack desde 0, sin create-react-app
Referencias
- React & Webpack | Configuración desde Cero
Más post de mi autoría:
Top comments (0)