Configurar Webpack & React Parte 3 - 🛠 Transpilando js, jsx con Webpack

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

.
├── 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.

{
  "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.

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

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

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

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

$ npm run build

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.

.
├── 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.