Aprenderemos todas las particularidades antes de mandar un sitio a producción
web pack es una herramienta que nos ayudará a preparar nuestro código para producción
Es un modo en el que trabajamos con cada parte del proyecto.
webpack nos permite trabajar conse podrán gestionar dependencias archivos estáticos html css imágenes fuentes
nació en el 2012
webpack es un module bundler
Muchas empresas lo usan como CORE de sus proyectos
habilitar un entorno en de desarrollo local que permite hacer pruebas en tu pc
se pueden cargar módulos de Javascript que pueden encontrar como el formato de amd commonjs ecmascript 2015
Es una filosofía que permite trabajar de forma modular.
con la que se divide el código en diferentes módulos.
técnicas que minifican el código y hacer uso de plugins
CONCEPTOS BÁSICOS de webpack
un paquete de módulos estáticos para aplicaciones de Javascript modernas
construye un gráfico de dependencias que mapea cada módulo para convertirlo en uno o más módulos,
ya no se depende de un archivo de configuración, ahora funciona con un estándar.
index.js será el principal.
se trabaja un punto de salida dis ( donde se añaden los elementos que se trabajaran con webpack)
Dispone de loader y plugins se puede usar un loader. react usa jsx la sintaxis que permite usar xml y html dentro de react y con esto poder utilizar el loader para identificar la sintaxis y trabajar el proyecto
Primer Build con WEBPACK
Instalación de webpack y Construcción del proyecto
iniciar con ‘git init’, segudo de ‘npm init’
después instalar ‘webpack’ y ‘webpack-cli’ para tener comando dentro de la terminal y -d => lo guarda como dependencia.
Con el siguiente comando podemos instalar las 3 configuraciones al tiempo => npm install webpack webpack-cli -d
En este momento webpack solo se ha instalado de manera local.
npx webpack => prepara el proyecto , y procesa variables funciones y otros elementos para distribución de una manera más optimizada y simple.
¿Qué pasa en el desarrollo?
‘npx webpack --mode development’ codigo para activar el modo desarrollo el cual agrega comentarios e instrucciones para organizar el documento principal de JS
Configuración de webpack.config.js
Se crea este archivo en la carpeta principal del archivo.
Este archivo nos ayuda a compilar y organizar nuestro proyecto
en el archivo creamos una constante =>
el entry nos ayuda a definir cuál es el archivo de inicio
const path = require(‘path’);
module.exports = {
entry: ‘./src/index.js’
output: {
path: path.resolve(__dirname,‘dist’),
filename:‘main.js’,
},
resolve:{
extensions: [’.js’]
}
}
también se debe definir el output. y se delimita el path donde debe ir, y se define el archivo que saldrá.
toca definir qué tipo de paquetes o extensiones contendrá el proyecto .
ahora para mandar a producción con esta configuración =>
npx webpack --mode production --config webpack.config.js
Babel loader para Javascript
nos ayuda a preparar nuestro código para que sea compatible con todos los navegadores.
con este código en la consola lo instalamos => npm install -D babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime
y en la carpeta general creamos un documento .babelrc para el control de este mismo (este archivo está oculto para el cliente) estándar usado en la industria, dentro de babel creamos un objeto donde pondremos la info que vamos a usar= los presets = los plugins@@/
ya en webpack terminamos de configurarlo dentro del módulo exports.
agregando un módulo test: /.m?js$/ (esto es una expresión regular )
HTML en webpack
TOCA INSTALAR ESTE PLUGIN PARA QUE TRABAJE MEJOR CON HTML => npm install html-webpack-plugin -D
esto instala el plugin HTML=> ‘npm install html-webpack-plugin -D’
acá tenemos que agregar este recurso en webpack.config.js
ponemos esto en el archivo en la parte superior => const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
y ahora toca crear una sección de plugin en webpack.config.js
esto se agrega al final =>
plugins: [
new HtmlWebpackPlugin({
inject: true, //para que haga la inserción de los elementos
template:'./public/index.html', //usaremos el template que usaremos
filename:'./index.html'// este será el resultado.
})
]
LOADERS DE CSS Y PREPROCESADORES DE CSS.
Lo primero es instalar las dependencias para trabajar con estas,
‘npm install mini-css-extract-plugin css-loader -D’
Dentro de src encontraremos nuestro archivo index.js, dentro de este agregaremos nuestro estilos.
debajo del último import agregamos => ‘import ‘./styles/main.css’;’
y ahora dentro del archivo webpack.config.js debemos añadir primero una constante =>
‘const MiniCssExtractPlugin =require(‘mini-css-extract-plugin’);’ //esto agrega el plugin al documento.
y ya abajo en los módulos debajo o después de las reglas que pusimos para babel loader, agregamos una nueva
regla
{
test: /.css$/i, // esta lógica sirve para que reconozca los archivos css
use: [MiniCssExtractPlugin.loader,
‘css-loader’ // esto es para decirle que plugin cargar primero va el nombre, luego el archivo
],
}
//se crea la configuración del loader de css.
y debajo de plugins ponemos uno nuevo con el nombre de ‘new MiniCssExtractPlugin()’
// y la utilización del recurso.
y para probar corremos el comando
‘npm run dev’ //en este paso no tenia instalado el dev que se instala como script en package.json como
=> ’ “dev”: “webpack --mode development” '. así ya se puede ejecutar
de esta forma podemos ver todo mas desglosado
En este punto ya tenemos el proyecto con webpack y css.
cargando PREPROCESADORES, stylus sass o less.
Vamos a instalar stylus con el siguiente código en la terminal=> ‘npm install stylus stylus-loader’
y en el archivo de webpack.config.js en la sección que usamos para css, podemos agregar el prepro de la siguiente forma.
{
test: /\.css|.styl$/i, // esta lógica sirve para que reconozca los archivos css, y luego agregamos los de stylus,
use: [MiniCssExtractPlugin.loader,
'css-loader',
'stylus-loader'
],
}
después tenemos que importar estos estilos al archivo main, index.js
con un import adicional => 'import ‘./’'
y volvemos a correr ‘npm run dev’ para actualizar cambios
COPIA DE ARCHIVOS CON WEBPACK
Resumen: copiar archivos de development a distribución
es necesario instalar este plugin ‘npm install copy-webpack-plugin -D’
Inicialmente las imágenes vienen preestablecidas en el template de JS y las vamos a pasar a producción
En el archivo de webpack.config.js vamos a poner otra constante para traer el plugin de copy webpack al proyecto final.
=> const CopyPlugin = require(‘copy-webpack-plugin’);
Y ahora se configura un plugin dentro del mismo webpack file.
=> new CopyPlugin({
patterns: [
{
from: path.resolve(__dirname, “src”, “assets/images”),// acá se especifica que se desea traer lo que está en esa dirección.
to:“assets/images” //destino donde se desean los archivos
}
]
})
y en el archivo del Template vamos a modificar la url de las imágenes, a la carpeta final de assets
Loaders de imágenes
Otra forma para trabajar con las imágenes, haciendo un import de las mismas y llamandolas como una variable.
El node de webpack ya contiene los recursos, es necesario crear una regla para llamar este comando.
=> {
test: /.png/, //estos son los archivos que se van a utilizar.
type: ‘asset/resourse’,
}
Y en el template vamos a importar estos archivos con un comando,
import github from '…/assets/images/github.png’
import twitter from '…/assets/images/twitter.png’
import instagram from ‘…/assets/images/instagram.png’;
y modificamos los links de imágenes del template, cambiandolos por la variable creada.
Loaders de Fuentes
Optimizar fuentes para hacerlo de forma local y no llamar a otra web, para traerlas .
en main css estamos llamando la font desde google font. Google font permite descargar fuentes pero no en el formato .woff que se necesita, el cual ya está optimizado.
En esta página se puede encontrar: https://google-webfonts-helper.herokuapp.com/fonts.
En el documento de estilos principal en este caso main.css, vamos a agregar un nuevo comando para llamar las fuentes descargadas.
Este codigo = @import “https://fonts.googleapis.com/css?family=Ubuntu:300,400,500”;
el cual llama a la fuente desde google se reemplaza por descargar fuentes y se agregan con el comando @font-face
CÓDIGO EJEMPLO:
@font-face {
font-family: ‘ubuntu’;
src: url(’…/assets/fonts/ubuntu-regular.woff2’) format(‘woff2’),
url(’…/assets/fonts/ubuntu-regular.woff’) format(‘woff’);
font-weight: 400;
font-style: normal;
}
Ahora se debe configurar que las fuentes se exporten de development a distribution:
Toca instalar el nodo => ‘npm i url-loader file-loader -D’
Y ahora toca agregar el recurso en webpack, Acá agregamos una nueva regla:
=>
{
test: /.(woff|woff2)$/,
use: {
loader: ‘url-loader’,
options: {
limit: 10000,
mimetype: “application/font-woff”,
name: “[name].[ext]”,
outputPath: “./assets/fonts/”,
publicPath:"./assets/fonts/",
esModule: false,
}
}
}
y configuramos la exportación de este mismo desde la carpeta assets. desde distr => a prod; tenemos que realizar una inserción en el documento de webpack.config.js en el sección de module.exports se agrega el siguiente output => ‘assetModuleFilename:’
output: {
path: path.resolve(__dirname,‘dist’),
filename:‘main.js’,
assetModuleFilename: ‘assets/images/[hash][ext][query]’,
},
terminamos con NPM run webpack developer -D o en este caso npm run dev ( ya que lo tenemos en package.json)
Optimización: hashes, compresión y minificación de archivos
De las razones más importantes para utilizar webpack es la optimización, comprimir todo y optimizar todo. Primero Minimizar css y minimizar Js.
Debemos instalar => 'npm i css-minimizer-webpack-plugin terser-webpack-plugin -D’
Ahora debemos agregar estos recursos a la configuración,Agregamos las constantes en el documento de webpack =>
const CssMinimizerPlugin = require(‘css-minimizer-webpack-plugin’);
const TerserPlugin = require(‘terser-webpack-plugin’);
y agregamos unas opciones para poder utilizarlo. Estas se ubican debajo de los plugins.
optimization: {
minimize: true,
minimizer: [
new CssMinimizerPlugin(),
new TerserPlugin(),
]
}
WebPack Alias
Se pueden crear alias para los packs que creamos .
En el documento de webpack.config.js vamos a agregar un objeto en resuelve donde vamos a establecer todas las configuraciones.
resolve:{
extensions: [’.js’],
alias: {
’@utils’: path.resolve(__dirname, ‘src/utils/’),
’@templates’: path.resolve(__dirname, ‘src/templates/’),
’@styles’: path.resolve(__dirname, ‘src/styles/’),
’@utils’: path.resolve(__dirname, ‘src/images/’)
}
},
con esto quedan configurados los alias.
pasa de
import getData from ‘…/utils/getData.js’;
a
import getData from ‘@utils/getData.js’;
Variables de entorno
Espacio seguro donde podemos hacer cambios al colaborar con personas y no dañar el proceso
Para instalarlo => 'npm install dotenv-webpack -D’
Creamos un archivo en la carpeta general => ‘.env’ en el cual se van a encontrar las variables de entorno, en este documento ponemos la API que estamos utilizando con la siguiente estructura =>
API=https://randomuser.me/api/
, el archivo .env no se sube al repositorio, estas se deben solicitar al líder de equipo
y un archivo => ‘.env-example’, En este se pondrán los elementos ejemplo de que variables requiere el proyecto
en este archivo agregamos la api sin url
Ahora agregamos la configuración en el documento de webpack.config.js, Primero agregamos una constante al inicio del documento
=> 'const Dotenv = require(‘dotenv-webpack’);'
Luego en la sección de plugin al final agregamos=> ‘new Dotenv(),’
Y ahora en el archivo donde estamos llamando la api cambiamos
const API = 'https://randomuser.me/api/'
ya no se llama la API de esa forma, sino que se llama desde la variable de entorno de forma anónima, y más segura. protegiendo nuestro código e información sensible.
'const API = process.env.API;'
Webpack en modo desarrollo optimizado
Para separar las configuraciones de modo desarrollo y producción se crean nuevos archivos y copiamos todo el contenido del archivo webpack.config.js.
Development
’webpack.config.dev.js’
En este vamos a eliminar la sección de optimización de CSS y Javascript ya que no lo necesitamos en Development.
En la sección de module.exports agregamos un objeto que especifica el Modo => 'mode: ‘development’'
y ahora vamos a cambiar el comando para llamar
"dev": “webpack --mode development”
, ya no será por medio de un comando, ahora será llamando directamente el documento de modo dev. AHora será
"dev: "webpack --config webpack.config.dev.js"
de este modo será más rápido
Webpack en modo producción
LIMPIEZA EN PRODUCCIÓN
Cómo limpiar el documento para que esté limpio y optimizado para producción, eliminando archivos que no deberían estar, esta limpieza la vamos a generar con un plugin => ‘npm i clean-webpack-plugin -D’
Agregamos una constante en el documento de webpack.config.js
’const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’);'
y agregamos un plugin en el mismo archivo.
'new CleanWebpackPlugin(),'
y en el documento de package.json especificamos este archivo como el archivo de build (producción),
de “build”: “webpack --mode production” a => “build”: “webpack --mode production --config webpack.config.js”.
Así nos aseguramos de que archivos web.config usaremos.
Webpack Watch
Esto nos mostrará cada cambio que se realice en el proyecto y se compila de forma automática.
Dentro de module.exports en el documento de webpack.config.dev.js (modo desarrollo) vamos a agregar un nuevo módulo => ‘watch: true,’
Con este comando, automatizamos el procesar el webpack al ejecutar el comando => ‘npm run dev’ va a iniciar a procesar el webpack y va a quedar activado esperando cualquier en los archivos para compilarlo de forma automática. Para detener este proceso utilizamos ‘ctrl + c’.
Con esto nos ahorramos estar volviendo a la consola con cada guardado.
Vamos a agregar un nuevo script en package.json para separar este comando del modo default.
=> “build:watch”: “webpack --watch --config webpack.config.js” .
Es necesario entender en qué momento utilizar el watch, es preferible en el modo desarrollo local, ya que en el de producción podría demorar bastante.
Deploy a Netlify
Primero se prepara todo para que vaya a producción, Netlify permite desplegar una APP de una forma amigable conectándolo a un repositorio es necesario tener conectado el repositorio con netlify, en este caso conectar github con netlify.
Crear un documento en la carpeta general => ‘netlify.toml’ , y acá cargaremos la configuración del build
[build]
publish = "dist"
command = "npm run build"
vamos a hacerle add y luego un commit en la consola podemos agregar gitmoji un organizador de commits
con ‘git submodule add https://github.com/Julianfam/javascript-webpack-netlify-integrarion.git’ logre crear el submodulo de git.
<git pull --recurse-submodules> solucionando configuración con github y gitbash.
una vez solucionado el deploy del proyecto vamos a crear en la carpeta general una carpeta de ‘scripts’ para organizar mejor el proyecto, dentro de esta carpeta vamos a crear el archivo create-env.js
En este archivo vamos a crear una constante para poder trabajar con filesystem, con el sistema operativo.
const fs =require('fs');
fs.writeFileSync('./.env', `API=${process.env.API}\n`) => esto va a crear un archivo en .env,
COn este archivo vamos a poder escribir en archivos dentro del pc
’process.env.API’ esta variable se asignara en netlify
en netlify dentro de deploy settings , en la sección de environment, y en edit variables creamos una nueva.
Y creamos la variable de la api que estamos usando dentro de netlify https://randomuser.me/api/.
también vamos a modificar el script dentro de build de la siguiente manera
"build": “node ./scripts/create-env.js && webpack --mode production --config webpack.config.js”,
WebPack Dev Server
Ver cambios en tiempo local, y tener un servidor en tiempo local
vamos a agregar webpack web server primero desde la consola => 'npm i webpack-dev-server -D’
con esto creamos un servidor de desarrollo local, este servidor será utilizado solo en el modo de desarrollo así que usaremos el archivo webpack.config.dev.js para esta configuración
en la parte inferior del archivo le pasamos la configuración:
devServer: {
contentBase: path.join(__dirname, ‘dist’),
compress: true,
historyApiFallback: true,
port: 3005
}
hay que tener que contentbase ya no se usa por actualización de contenido ahora se utiliza
devServer: {
static: {
directory: path.join(__dirname, ‘dist’),
},
compress: true,
historyApiFallback: true,
port: 3005,
}
Con esta configuración ya tenemos listo el servidor local.
el modo de entorno local
Ahora en package.json en los scripts le agregamos uno nuevo
"start": “webpack serve --config webpack.config.dev.js”
Webpack Bundle Analyzer
este ayuda a entender cómo está constituido el proyecto, y qué elementos están muy grandes dentro del mismo y que se pueda quitar la optimización desde webpack.
Para instalar =>
npm install webpack-bundle-analyzer -D
ahora agregamos el recurso al documento de webpack.config.dev.js
iniciamos con la constante =>
'const BundleAnalyzerPlugin =require(‘webpack-bundle-analyzer’).BundleAnalyzerPlugin;'
y continuamos con el comando en plugins =>
new BundleAnalyzerPlugin(),
Este recurso que acabamos de crear toca correrlo para que genere los reportes deseados y nos ayudará a entender donde podremos mejorar el código.
ahora para que nos arroje el reporte corremos el siguiente comando en la consola :
npx webpack --profile --json > stats.json (deseamos que corra webpack con el perfil deseado que guarde en un json el reporte como stats.json, ahi tendre el reporte de las dependencias y recursos que estoy usando en este mismo )
ya teniendo este reporte podemos utilizar WebPack Bundle Analyzer para ver el reporte de forma más amigable => con el siguiente código
npx webpack-bundle-analyzer stats.json
Webpack DevTools
Devtools Nos permite crear un mapa de nuestro código para poder analizarlo a detalle
Lo primero es identificar el archivo webpack de desarrollo , este módulo requiere una configuración específica. En module.exports debajo del mode: vamos a activar la opción de devtool agregando lo siguiente=> devtool: ‘source-map’, este nos permitirá generar el mapa del código, y lo genera en un formato json. Ejecutamos ‘npm run dev’ para que compile con el nuevo comando
CONFIGURANDO PROYECTO REACT DESDE CEROS
Instalación y configuración de React
Primero debemos instalar las dependencias de react con -S para guardarlo general
npm install react react-dom -S
npm init -y => respeta dependencias ya instaladas y configura el repositorio
Ahora crear la estructura del proyecto
node_modules <esto se crea con npm init e instalando las dependencias>
public
index.html
src
components
App.jsx
styles
global.scss
index.js
.babelrc
webpack.config.js
Dentro del index.js vamos a llamar react y react-dom, e importamos el componente de app y crearemos el recurso de donde se importará la app, esto para mostrar nuestra app dentro de un archivo html
==>
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import App from ‘./components/App’;
ReactDOM.render(<App />,document.getElementById(‘app’));
Al documento de html que creamos, le creamos una plantilla con ! y dentro del body ponemos lo siguiente ==>
<body>
<div id="app"></div> //este id se conecta con el getElementById de arriba.
</body>
y para react vamos a configurar lo siguiente en el documento de App.jsx
import React from "react";
const App = () => <h1>Hello beautiful world seen from React!</h1>
export default App;
Configuración de Webpack 5 para React.js
primero instalamos babel
npm i @babel/core @babel/preset-env @babel/preset-react babel-loader -D
vamos a crear el documento .babelrc dentro de la carpeta global y le agregamos un objeto con los presets del babel que usaremos
dentro de .babelrc =>
{
“presets”: [
"@babel/preset-env",
"@babel/preset-react"
]
}
Ahora vamos a instalar webpack =>
npm i webpack webpack-cli webpack-dev-server -D
y ahora creamos el archivo de configuración de webpack en la carpeta general webpack.config.js
const path = require(‘path’);
Configuración de plugins y loaders para React
ahora trabajaremos los loades y los plugins para trabajar con html, en la terminal instalamos
npm install html-loader html-webpack-plugin -D
le agregamos una nueva constante al archivo webpack en la parte superior
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
y en la parte de reglas vamos a agregar una nueva para usar el loader =>
{
test:/.html$/,
use: [
{
loader: ‘html-loader’
}
]
}
y ahora en el documento de webpack vamos a agregar la seccion de plugin y vamos a agregar un nuevo plugin
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html,
filename: ‘./index.html’
})
]
Ahora en el archivo de package.json vamos a crear los nuevos comandos de build y dev
Configuración de Webpack para CSS en React
primero instalamos las dependencias de css, en este caso vamos a instalar css con el preprocesador de SASS
npm i mini-css-extract-plugin css-loader style-loader sass sass-loader
ahora en el archivo de webpack config agregamos la siguiente configuración
primero ponemos la constante
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);
ahora agregamos la regla en rules para trabajar con los loaders de css: (exprecion regular = test: /.s[ac]ss$/,)
{
test: /.s[ac]ss$/,
use: [
‘style-loader’,
‘css-loader’,
‘sass-loader’
]
}
Ahora agregamos el plugin
new MiniCssExtractPlugin({
filename: '[name].css'
})
ahora creamos una carpeta nueva en la carpeta global llamada ‘styles’ y dentro de esta misma vamos a crear un archivo llamado global.scss y agregamos la configuración que pondremos en el css en el scss
y ahora en el documento de index.js vamos a crear otro import para llamar estos estilos
import ‘./styles/global.scss’;
Optimización de Webpack para React
Veremos las últimas configuraciones para mandarlo a producción, lo primero que toca hacer es instalar los paquetes que se usarán para la optimización ayudarán a trabajar con css y optimizar el javascript y optimizar el recurso en general
npm install css-minimizer-webpack-plugin terser-webpack-plugin clean-webpack-plugin -D
acá vamos a crear el documento de webpack para modo desarrollo webpack.config.dev.js
copiamos como esta webpack.config.js ====> webpack.config.dev.js
y agregamos module exports el modo development
mode: ‘development’,
En el modo producción borramos la sección de devserver ya que es solo para desarrollo .
En el archivo de produccion agregamos las siguientes constantes:
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin);
const TerserPlugin = require(‘terser-webpack-plugin’);
const { cleanWebpackPlugin }= require(‘clean-webpack-plugin’);
agregamos en la sección de module.exports dentro del módulo deoutput => publicPath:"/",
en el módulo de resolve agregamos alias =>
alias: {’@components’ : path.resolve(__dirname, ‘src/components’),
’@styles’: path.resolve(__dirname, ‘src/styles/’)}
agregamos un nuevo plugin
new cleanWebpackPlugin(),
ahora debajo de los plugins por fuera, agregamos el módulo de optimización
optimization: {
minimize:true,
minimizer: [
new CssMinimizerPlugin(),
new TerserPlugin()
]
}
podemos agregar como módulo el mode: ‘production’
ahora falta modificar en package.json en la sección de scripts el contenido de start y build
"start": "webpack serve --config webpack.config.dev.js",
"build": "webpack --config webpack.config.js"
ya está todo listo solo falta probarlo para producción
Deploy del proyecto con React.js
ahora vamos a hacer el deploy en netlify
creamos un nuevo sitio, debemos tener el repositorio ya en github
y lo subimos, corregir errores si es necesario, y si no, ya estará el sitio live.
