No necesitas empezar un proyecto react desde cero como lo explico en este artículo, para ello puedes usar https://github.com/facebook/create-react-app, el ejercicio de este post es conocer la herramienta webpack.

¿Qué es Webpack?

Webpack es un empaquetador de módulos que permite automatizar procesos como transpilación de código, preprocesamiento (de .scss a .css).

¿Como instalar webpack?

Para poder instalar webpack debe tener node instalado, lo puedes instalar con nvm https://github.com/creationix/nvm o desde la pagina oficial https://nodejs.org/ descargando el paquete para tu sistema operativo; después de tener instalado node debes correr el siguiente comando:

npm install -g webpack

ó yarn global add webpack

De esta manera tendrás webpack instalado de forma global, para comprobar que webpack quedó bien instalado corre webpack -v esto te mostrará la versión que acabas de instalar.

Empezar con el proyecto

Primero que todo debemos crear una carpeta para guardar el código fuente de nuestra proyecto.

Para este artículo mi carpeta se va a llamar webpack-example sin embargo tu puedes usar el nombre que prefieras.

En un proyecto javascript como el que estamos configurando es imprescindible tener un archivo package.json que es el archivo donde definimos tanto las características de nuestro proyecto como los paquetes que vamos a usar, para crear este archivo npm nos provee una manera rápida y elegante de lograrlo, solo tenemos que correr el comando npm init dentro de nuestra carpeta y seguir paso a paso llenando los requisitos del wizard.

Los paquetes que vamos a usar son: react react-dom

Para ello podemos usar npm o yarn para instalar los paquetes con el siguiente comando:

npm install --save react react-dom ó yarn add react react-dom

{
  "name": "webpack-example",
  "version": "1.0.0",
  "description": "Webpack is a module bundler and this is a example",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Luis Carlos",
  "license": "ISC",
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  }
}

Asi es como se ve nuestro package.json después de correr los comandos.

Como estamos hablando un proyecto que utiliza las nuevas funcionalidades de ECMAScript 6 para que el navegador entienda nuestro código debemos usar herramientas como babel para que conviertan nuestro código en código que los navegadores puedan ejecutar, para ello vamos a aprender a configurar los loaders de webpack en el siguiente paso.

¿Qué son los Loaders de Webpack?

Los loaders son las transformaciones que va a tener el código fuente, en otros herramientas como gulp se podría comparar con las tareas, Por ejemplo un loader de un archivo .scss se encarga de cargar el archivo y convertirlo en .css por medio de otros paquetes como node-sass.

Para este proyecto necesitamos solo unloader webpack nos permite usar tantos como sean necesarios.

Vamos a usar https://github.com/babel/babel-loader este loader nos permite convertir el código .js ES-2017 a código que la mayoría de navegadores puedan ejecutar.

Para instalar ese loader debemos correr el siguiente comando:

npm install --save-dev babel-loader babel-core babel-preset-env ó yarn add -D babel-loader babel-core babel-preset-env

{
  "name": "webpack-example",
  "version": "1.0.0",
  "description": "Webpack is a module bundler and this is a example",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Luis Carlos",
  "license": "ISC",
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1"
  }
}

Asi es como se ve nuestro package.json después de correr los comandos.

Se ha creado un nuevo item “devDependencies” en el que aparecen todas las dependencias de desarrollo.

A partir de ahora ya tenemos los requisitos principales para correr el proyecto, en el siguiente paso vamos a crear los archivos de configuración de webpack en el que le decimos a webpack que debe hacer para que lea nuestro código y efectúe todas las actividades necesarias.

Configuración del archivo webpack.config.js

Webpack lee las configuraciones desde el archivo webpack.config.js tal como lo vemos en https://webpack.js.org/concepts/configuration/#the-simplest-configuration solo se necesita una entrada y una salida.

var path = require('path');

module.exports = {
  entry: './App.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js'
  }
};

En esta configuración le estamos diciendo a webpack que lea el archivo App.js donde vamos a tener nuestra aplicación de react js y que cuando efectúe todas sus acciones nos cree un archivo app.bundle.js en la carpeta dist

Solo nos falta decirle a webpack que debe usar babel ya que en nuestro App.js estamos usando class que es una de las nuevas funcionalidades de ES-2016, para ello vamos a configurar babel-loader

var path = require('path');

module.exports = {
  entry: './App.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js'
  },
  module: { rules: [ { test: /\.js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['env', 'react'] } } } ] } };

Y así es como finalmente tenemos configurado webpack para una app de react.

Puedes ver el código fuente aca:

https://github.com/pycarlos/react-basics