Objetivos:
Custom HooksWebpack- 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.