Categoría: Temporada 0

Objetivos:

• Custom Hooks
• Webpack
• Class components

Webpack

Una de las cosas nuevas que he aprendido estas semanas de estudio ha sido el concepto de transpilación. Aquí está mucho mejor explicado pero, a grandes rasgos, transpilar un código es trasladarlo a otro código con un nivel similar de abstracción: lo que vendría a ser, en lingüística, traducir de un idioma a otro.

El objetivo de esta parte del curso es entender el concepto empezando desde cero y sin usar el create-react-app que te monta todas las dependencias y la estructura de carpetas de forma automática.

Estructura de carpetas básica

Empezamos con esta estructura simple y sobre ella trabajaremos.

Lo primero es definir el package.json con las instrucciones y ajustes básicos.

{
  "name": "webpack-part7",
  "version": "0.0.1",
  "description": "practising webpack",
  "scripts": {},
  "license": "MIT"
}

Para luego añadir a nuestra instalación los archivos de webpack:

npm install --save-dev webpack webpack-cli

Mientras que el archivo de configuración de Webpack quedaría:

const path = require('path')

const config = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'main.js'
  }
}
module.exports = config

El problema con el que te encuentras al intentar transpilar React es que Webpack no está preparado para ello, así que habría que configurarlo de la siguiente manera:

const config = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'main.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['@babel/preset-react'],
        },
      },
    ],
  },
}

Lo mismo sucede cuando queremos transpilar código en CSS, debemos actualizar nuestra configuración de Webpack:

    {
      test: /\.css$/,
      loaders: ['style-loader', 'css-loader'],
    },

Para evitar tener que estar constantemente transpilando, Webpack ofrece una solución sencilla, webpack-dev-server:

npm install --save-dev webpack-dev-server

Existen muchas y distintas opciones que nos permiten configurar Webpack en condiciones para desarrollar con un flujo de trabajo rápido y eficiente. Una posible versión final de las configuraciones de webpack.config.js y package.json podrían ser:

const path = require('path')
const webpack = require('webpack')

const config = (env,argv) => {
  console.log('argv', argv.mode)

  const backend_url = argv.mode === 'production'
    ? 'https://blooming-atoll-75500.herokuapp.com/api/notes'
    : 'http://localhost:3001/api/notes'
  
  return{
    entry: ['@babel/polyfill','./src/index.js'],
    output: {
      path: path.resolve(__dirname, 'build'),
      filename: 'main.js'
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          loader: 'babel-loader',
          query: {
            presets: ['@babel/preset-react', '@babel/preset-env'],
          },
        },
        {
          test: /\.css$/,
          loaders: ['style-loader', 'css-loader'],
        },
      ],
    },
    devServer: {
      contentBase: path.resolve(__dirname, 'build'),
      compress: true,
      port: 3000,
    },
    devtool: 'source-map',
    plugins:[
      new webpack.DefinePlugin({
        BACKEND_URL: JSON.stringify(backend_url)
      })
    ]
  }
}


module.exports = config

{
  "name": "webpack-part7",
  "version": "0.0.1",
  "description": "practising webpack",
  "scripts": {
    "build": "webpack --mode=production",
    "start": "webpack-dev-server --mode=development"
  },
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "@babel/preset-react": "^7.10.4",
    "babel-loader": "^8.1.0",
    "css-loader": "^4.3.0",
    "style-loader": "^1.3.0",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "@babel/polyfill": "^7.11.5",
    "axios": "^0.20.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  }
}

No obstante, soluciones como create-react-app ahorran esta tarea manual y permiten comenzar a trabajar prácticamente de forma inmediata sin a penas configurar nada.