Configurar Webpack & React Parte 3 - 🛠 Transpilando js, jsx con Webpack
Tags: javascript, react, webpack, webdev
Published: 2020-07-02 21:39:49

En esta entrega por fin empezaremos a escribir la configuración de webpack y para poder probarlo añadiremos un comando a nuestro `package.json`.

## webpack.config.js

Webpack necesita un archivo de configuración en el cual por medio de javascript escribiremos como debe utilizar los paquetes previamente instalados.

Para eso en la carpeta raíz de nuestro proyecto debemos crear el archivo `webpack.config.js`

Quedando un árbol de archivos y directorios como el siguiente
```bash
.
├── public
│   └── index.html
├── src
│   ├── components
│   │   └── HolaMundo.jsx
│   └── index.js
├── .babelrc
├── package-lock.json
├── package.json
└── webpack.config.js
```

## Build

Como siguiente paso debemos indicarle a NPM un nuevo comando para compilar nuestro proyecto con webpack, para eso debemos editar nuestro `package.json` y agregar la siguiente linea `"build": "webpack --mode production"` en la sección de `scripts` como se ve abajo. 

El comando en cuestión le dirá a webpack que genere nuestro proyecto en modo producción.

```json
{
  "name": "webpackreact",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "@babel/core": "^7.10.3",
    "@babel/preset-env": "^7.10.3",
    "@babel/preset-react": "^7.10.1",
    "babel-loader": "^8.1.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  }
}
```

### Manejando archivos .js y .jsx

Previamente ya habíamos instalado React y Babel, ahora toca decirle a webpack que lo utilice para convertir nuestro código a un javascript que el navegador lo pueda entender. 

Para eso debemos editar el archivo `webpack.config.js` y colocar las siguientes lineas.

```javascript
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  resolve: {
    extensions: [".js", ".jsx"],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
};

```

Las partes importantes del código anterior son las siguientes

#### entry

```javascript
module.exports = {
  ...
  entry: "./src/index.js",
  ...
}
```

Le dice a webpack cual es el archivo de entrada que tiene el código fuente de nuestra aplicación react y sus importaciones.

#### output
```javascript
module.exports = {
  ...
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  ...
}
```

Le dice a webpack en donde se generara el transpilado de nuestra aplicación react, en este caso es en la carpeta `dist` y con el nombre `bundle.js`

#### rules

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

En la sección de rules va la configuración con respecto a las extensiones que queremos tratar, en este caso particular, estamos diciendo en `test:` que serán los archivos con extensión `js` y `jsx`, en `exclude` que vamos a excluir los que están en la carpeta `node_modules` y en `use` usaremos `babel-loader` para tratarlos.

### Probando nuestra configuración webpack

Solo tenemos que correr el nuevo comando que agregamos previamente en `package.json`

```bash
$ npm run build
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1dy9m5k0fcaz2k8l3alp.png)

Como nos podemos dar cuenta, tenemos una nueva carpeta llamada `dist` y dentro de ella un archivo llamada `bundle.js` que es nuestro archivo final para producción.

El nuevo árbol de directorios y archivos sera como el siguiente.

```bash
.
├── dist
│   └── bundle.js
├── public
│   └── index.html
├── src
│   ├── components
│   │   └── HolaMundo.jsx
│   └── index.js
├── .babelrc
├── package-lock.json
├── package.json
└── webpack.config.js
```

## Despedida
Por ahora tenemos la capacidad de transpilar código javascript pero aun no tenemos un archivo `html` para visualizarlo, en la siguiente entrega añadiremos soporte para archivos `html`.