Configurar webpack con react
Seguimos con la guia de Webpack, en este articulo aprenderemos a configurar webpack para poder trabajar con React, si aun no tienes configurado el transpilador de es6 para webpack, es necesario que lo hagas ya que es esencial para trabajar con React.
Configurar React para Webpack
Empecemos la configuración, primeramente debemos instalar las dependencias necesarias para que webpack pueda trabajar con React.-
1
$ npm install -D react react-dom
Las dependencias que instalamos son las siguientes.-
- react.- biblioteca Javascript para UI (interfaces de usuario).
- react-dom.- sirve como punto de entrada a los procesadores DOM y servidor para React.
Además de estas dependencia necesitamos una más “babel-preset-react”, procedemos a instalarla.-
1
$ npm install -D @babel/preset-react
Este preset incluye los siguientes complementos que nos ayudarán con la transpílación de jsx.-
- preset-flow
- syntax-jsx
- transform-react-jsx
- transform-react-display-name
Ahora hay que configurar babel, modificamos el archivo “.babelrc”.-
1
2
3
4
5
6
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
Por ultimo vamos a añadir una configuración más a webpack para que babel-loader tambien pueda leer los archivos .jsx (en caso de utilizarlos con React), modificamos el archivo “webpack.config.js” de la siguiente forma.-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// App.js
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
Agregamos un archivo de prueba React
Para ver que funciona correctamente, podemos crear un nuevo archivo en el directorio “src” al que llamaremos “App.js” con el siguiente contenido.-
1
2
3
4
5
6
7
8
9
10
11
import React from "react";
import ReactDOM from "react-dom";
const App = () => {
return (
<div>
<p>React here!</p>
</div>
);
};
export default App;
ReactDOM.render(<App />, document.getElementById("app"));
Y modificamos el archivo “index.js” donde importaremos el código de “App.js”.-
1
2
// index.js
import App from './App.js';
Y corremos Webpack para transpilar el código.-
1
$ npm run dev
Podemos validar en el contenido del archivo “main.js” que es donde se crea el código en es5 (Javascript).
Configurando el plugin de HTML para webpack
Si llegaste a este punto habras notado que a pesar de haber hecho un ejemplo basico con React no lo pudimos ver en ejecución ya que por defecto webpack no tiene soporte para archivos HTML, pero podemos configurarlo.
Webpack necesita dos componentes adicionales para poder procesar HTML.-
- html-webpack-plugin.- Este complemento generará un archivo HTML5 para incluir todos nuestros paquetes de webpack en el cuerpo usando etiquetas script.
- html-loader.- Nos ayuda a exportar HTML como un string miniminandolo cuando el compilador lo necesite.
Instalamos las dependencias.-
1
$ npm install -D html-webpack-plugin html-loader
Ahora vamos a actualizar la configuración de webpack en el archivo “webpack.config.js”.-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
Y creamos nuestra plantilla del archivo “index.html” en el directorio “src”.-
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Webpack for React - Codeando</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
Y corremos webpack.-
1
$ npm run dev
Y veremos que en el directorio “dist” además de que se creo el archivo “main.js” tambien se creo el archivo “index.html” con el archivo “main.js” agregado.
Conclusiones
En estos momentos ya tenemos un entorno de desarrollo casi completo para desarrollar con React, solo falta configurar para que pueda extraer de los archivos el código CSS, lo cual veremos en el siguiente articulo.
Que tengan feliz código.