1- Crear carpeta en escritorio webpack-base
2- Abrir en visual studio Code
3- Abrir terminal
4- Ir a la carpeta actual
5- Comprobar NODE :
node --version
6- Comprobar NPM
npm --version
7- Crear archivo package.json
npm init
8- Todo enter
Se creo package.JSON !
npm init ----------- package.json
========================================================
2-NECESIDAD DEL WEBPACK(IMPORT)
Crear en el directorio raiz del proyecto carpeta llamada
src
Dentro de ella:
carpeta js ---> dentro archivo componentes.js
index.html
index.js
(Es una convencion porque webpack va a buscar la carpeta src)
En el index.html vamos a llamar desde srcipt src al archivo index.js
En componentes.js me voy a crear una funcion que se llame saludar:
const saludar = ( nombre ) => {
console.log('Creando etiqueta h1');
const h1 = document.createElement('h1');
h1.innerText = `Hola, que tal, ${ nombre }`;
document.body.append(h1);
}
Ahora, la voy a llamar desde el index.js con el import !!!!
import { saludar } from './js/componentes';
saludar('Camilo');
saludar('Yamila');
Y en el index.html tengo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpack base</title>
</head>
<body>
<script src="index.js"></script>
</body>
</html>
Ahora, se me rompe la aplicacion si uso el import !.
Y lo necesito para tener separado el codigo, los componentes por un lado.
3-INSTALACION Y CONFIGURACION DEL WEBPACK POR DEFECTO
WEBPACK
Nos vamos a la pagina oficial.
Guides
Getting started
Vamos a instalarlo.
Nos vamos a nuestra terminal.
Y tenemos que estar en la misma carpeta del package.json, en el directorio raiz.
Vamos a escribir para ello en consola
dir
Tenemos que ver el package.json, estamos en la misma carpeta.
Vamos a escribir el comando:
npm install webpack webpack-cli --save-devListo, vamos a ver que se crearon dependencias de desarrollo en el package.json
"devDependencies": {
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
}
Y creó tambien el
node_modules
Ahora, tenemos que ir al package.json y escribir esta linea:
"build": "webpack"
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
Le estoy diciendo:
Cuando ejecute BUILD dispara WEBPACK con mi CONFIGURACION POR DEFECTO
VA A BUSCAR LA CARPETA JS, VA A MINIFICAR Y COMPRIMIR LOS ARCHIVOS Y DEJARLOS LISTOS PARA PRODUCCION.
Vamos a la terminal:
dir (para ir al directorio raiz)
npm run build
webpack Creo la carpeta
dist
Y dentro
main.js
Alli esta el codigo minificado y ofuscado
EL MAIN.JS ES EL BUNDLED, la aplicaion de js tal cual
Es la app js tal cual, con todos los archivos de js en una unica importacion
Entonces, en el index.html yo voy a llamar a main.js (ya que tiene todo el js de mi app)
<script src="../dist/main.js"></script>
Ahora, tengo que decirle a mi funcion saludar de que quiero que se vea en el resto de la app, asi:
EXPORT:
export const saludar = ( nombre ) => {
Guardo los cambios y vuelvo a ejecutar :
npm run build
Voy a mi navegador, recargo y funciona !.
Hasta ahi es la configuracion por defecto de Webpack:
-funciona en el navegador
-Funciona export e import
-Pero tengo que guardar cambios y luego siempre hacer npm run build para que se
vean los cambios.
3-ARCHIVO DE CONFIGURACION DE
WEBPACK(PASAR CARPETAS)
WEBPACK(PASAR CARPETAS)
La carpeta dist
Si yo la borro y vuelvo a ejecutar npm run build se me crea de nuevo.
Esta carpeta es la que vamos a subir A PRODUCCION.
Por eso, es que alli deberia tener el index.html
! ! ! - Tengo que hacer un archivo de configuracion de webpack
En la carpeta raiz:
webpack.config.js
module.exports = {
}
Alli vamos a hacer la configuracion.
1- "mode" va a ser "developer" estamos en desarrollo (tener comentarios, etc)
2- "module" : donde empieza la configuracion del webpack
3- Dentro de "modules" vienen las reglas:
module.exports = {
mode: 'development',
module: {
rules: [
]
}
}
4- Yo quiero que mi index.html este dentro de la carpeta dist (distribucion), voy a escribir en consola:
En este punto voy a la terminal y escribo:
npm i -D html-loader html-webpack-plugin
npm i -D html-loader html-webpack-plugin
npm i -D html-loader html-webpack-plugin
Esto hace dos cosas:
a- index.html me la lleva al bundled (dist)
b- Y que incruste el budled en el index
Ahora podemos ver dicho paquetes en las dependencias en package.json
"html-loader": "^1.2.0",
"html-webpack-plugin": "^4.3.0",
5-Seguimos con las reglas:
module.exports = {
mode: 'development',
module: {
rules: [
{
test: /\.html$/i,
loader: 'html-loader',
options: {
attributes: false
},
}
]
}
}
6- Con "test" le estamos diciendo que aplique a archivo "html"
7- Voy a cargar arriba un paquete, arrriba del todo del archivo:
const HtmlWebPackPlugin = require('html-webpack-plugin');
8- Ese paquete lo voy a cargar en "Plugins", le voy a especificar los plugins que yo quiero
9- El "Template" le voy a decir que "archivo quiero tomar"
10- "filename" hacia donde quiero llevarlo
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
module: {
rules: [
{
test: /\.html$/i,
loader: 'html-loader',
options: {
attributes: false
},
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html'
}),
]
}
11-Guardo cambios, borro el dist y ejecuto en terminal:
12- npm run build
13- Vamos a ver ahora en la carpeta "dist" me ha puesto el archivo "index.html".
14- Si miro ese archivo, tengo 2 importaciones de js.
15- Ahora, si me voy a "src", "index.html" esa importacion no me va a servir, la voy a borrar:
En "src" ---> "index.html" --> Borro la importacion js
Y ahora hago en terminal "npm run build"
Ahora, si abro mi "Index.html" del "dist" en el navegador esta funcionando perfecto!.
15- Ahora, si me voy a "src", "index.html" esa importacion no me va a servir, la voy a borrar:
En "src" ---> "index.html" --> Borro la importacion js
Y ahora hago en terminal "npm run build"
Ahora, si abro mi "Index.html" del "dist" en el navegador esta funcionando perfecto!.
3-WEBPACK DEV SERVER(NO MAS NPM
RUN BUILD)
VAMOS A CONFIGURAR UN SERVIDOR DE DESARROLLO !
NO TENER QUE HACER MAS: NPM RUN BUILD
REFRESCAR DE MANERA AUTOMÁTICA
Si yo hago un cambio en components.js y lo guardo, no lo voy a ver hasta que no haga npm run build.
Vamos a instalar un paquete que me cambie eso.
Asi se ven los cambios al instante
Instalamos EL SERVIDOR DE DESARROLLO DE WEBPACK
En la terminal:
Ahora, si me voy al package.json, en las dependencias esta, ahora vamos a escribir un nuevo script:
Tenemos que configurar alli un SERVIDOR DE DESARROLLO que la ruta que esta en el browser se vea lo mas parecida a lo que vamos a ver en produccion: http:// o htpps://
En terminal:
npm start
Y se refresca de manera automatica si hacemos cambios
HACE EL NPM RUN BUILD DE MANERA INSTANTANEA
NO CERRAR LA TERMINAL ! ! ! !
Se tiene que ver esto en consola:
CAMBIAR PUERTO:
Si el puerto esta ocupado:
Y control c en terminal para poder escribir
Y otra vez:
npm start
Hay 2 formas de trabajar con estilos:
1-Cargar estilos de manera dinámica
2-Tener estilos globales.
Click derecho en "src" ---> Crear carpeta "css" --> Crear archivo "componentes.css"
El mismo nombre de componentes.js pero para el css.
Vamos a agregar estilos para el h1 muy básicos:
Si no tenemos abierta la app, con poner "npm start", nos lanza la app en el browser.
Hay que decir a Webpack que mueva ese archivo y lo COLOQUE EN EL BUNDLED DE LA APP.
1- Vamos a decirle que importe ese "componentes.css" cuando requerimos el "componentes.js"
Para eso vamos a tener que instalar un para de paquetes:
"css-loader" nos va a permitir minificarlo, inyectarlo para ponerlo en nuestro bundled.
Y el "style-loader".
Entre los dos van a hacer el trabajo.
En terminal:
npm i -D css-loader style-loader
Vamos a ver que estan instalados en el paquete de dependencias:
A - "IMPORTAR" Ahora, en mi "componentes.js" voy a importar ese archivo css:
B- "CONFIGURAR"
Vamos a nuestro archivo de configuracion "webpack.config.js" y vamos a escribir un par de reglas.
Entero:
Ahora,
1-Vamos a borrar la carpeta "dist"
2- Ejecutamos "npm run build"
3-Si vamos a "dist" --> "main.js" y buscamos(ctrl + f ) "red" (nuestro estilo del h1) vamos a ver que aparece y que nos lo esta importando como si fuera una libreria de javascript.
4- Abrimos otra vez "npm start"
Lo esta aplicando de manera dinámica.
Ahora se guardan los cambios del CSS de manera dinámica.
A-Crear "Main.css" en "dist"
Vamos a crear un archivo global de CSS en mi app.
Y que ese archivo global este importado en mi archivo de index.html y en mi carpeta de distribucion(dist).
1- En la carpeta "src" voy a crearme un archivo "styles.css".
En muchos frameworks es asi, si por ejemplo le pongo un color de fondo negro, y recargo no me esta aplicando los estilos.
Tengo que decirle que tiene que cargar los estilos.
2- Me voy a "Index.js" en "src" y le voy a decir que cargue los estilos, asi:
Ahora, se me aplican los cambios, y si me voy a "Main.js" y lo busco (ctrl + f) lo voy a encontrar, sigue cargandose como una libreria, pero yo quiero que ese archivo este en "dist", de manera independiente y que tambien lo coloque en el index de "dist"
3-Para eso vamos a hacer unas instalciones, vamos a instalar un plugin:
En terminal:
npm i -D mini-css-extract-plugin
Cuando dice "Plugin" tenemos que hacer algo muy parecido a lo anterior, en el archivo "webpack.config.js":
Y 4- Vamos a poner otra regla adicional, porque aunque es CSS voy a tener que usarlo de otra manera diferente:
Y ese archivo css , que es el styles, lo vamos a excluir arriba porque sino, al aplicarle la regla arriba (ya que es un archivo css) nunca llegaria a esta regla:
Y abajo, le digo como va a atrabajar:
Completo, el archivo de "webpack.config.js" quedaria asi:
Por ultimo, en terminal:
npm run build
Me acaba de CREAR "MAIN.CSS" EN "DIST"
B-Minimizar "main.css" (para despues para
produccion)
Si yo ahora escribo en webpack.config.js : "production" en vez de "development"
y ahora corro el "npm run build" y voy a "main.css" voy a ver que no esta minificado.
Para eso tengo que instalar otro paquete.
Me voy a la terminal:
npm i -D optimize-css-assets-webpack-plugin
Ahora, en "webpack.config.js" vamos a cargar arriba el plugin, (como todos los plugins)
Abajo de mode:
Y si ahora corro el "npm run build" voy a ver que esta minificado el css.
Si despues lo pongo en mode "development" y corro "npm run build" ya me va a dejar normal el archivo.
5- MANEJO DE IMÁGENES
1- Dentro del directorio "src" vamos a crear un directorio llamado "assests" y dentro vamos a guardar una imagen cualquiera de la web.
2- Ahora, la coloquemos en el html:
Ahora, no se ve, tenemos que decirle al webpack que queremos trabajar con imágenes.
Tenemos que instalar algo, vamos a la terminal:
npm i -D file-loader
Ahora, vamos a "webpack.config.js" y vamos a fijar una regla, vamos a decirle que evalue cualquier cosa que yo quiera mover, cualquier assets.
Ahora, tenemos que instalar otro paquete, porque asi no va a funcionar:
En la terminal:
npm i copy-webpack-plugin --save-dev
Ahora vamos a hacer una pequeña configuracion en "webpack.config.js"
Total:
-Borrar carpeta "dist".
-npm start
-Ahi tenemos la imagen !.
(NO ME CREA CARPETA ASSETS EN DIST).
-Crear un nuevo archivo en raiz que se llame "webpack.prod.js" donde TENGAMOS LA CONFIGURACION SOLO DE PRODUCCION.
-Copiar todo lo de "webpack.config.js" a "webpack.prod.js" y cambiamos algunas cosas:
1- 'development' a 'production'.
2- Output , filename: main.abc.js (abc para ponerle algo, ira un hash).
Y en "package.json" le vamos a especificar el nombre del archivo.
Ejecuto "npm run build" (podemos borrar antes "dist" para ver bien los cambios).
Ahora veo en "dist" que esta el "main.abc.js".
Y ahora si no quiero perder la configuracion de desarrollo, escribo ahi mismo en "package.json":
Ahora "npm run build" ya hora me aparecen en "dist": "main.js" y "main.abc.js".
Ahora, para que se actualize la cache en el navegador del cliente, webpack nos crea el "contentHash".
Lo escribimos asi:
npm run build
Se creo un nuevo archivo main con ese hash.
Vamos a hacer lo mismo con el CSS:
npm run build
Y esta.
6- INSTALACION Y CONFIGURACION DE
BABEL
Todavia tenemos 2 problemas:
1-Si estamos en un navegador muy viejo, todavia no soporta las constantes y me va a dar un error.
2-Tenemos que arreglar lo que nos minifique el main.js (solo minifica el main.css).
BABEL nos pasa del codigo moderno al codigo antiguo de Js para que lo soporten todos los navegadores.
1-Ir a Babel.
2- Ir a Setup
3- Ir a Webpack
Vamos a la terminal y pegamos esos comandos:
npm install --save-dev babel-loader @babel/core
Ahora me voy a "webpack.prod.js".
Vamos a crear una nueva regla y como Babel trabaja con Js solo va a afectar a los archivos de Js.
Escribimos nueva regla:
Copiamos tambien de la web de Babel:
module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ] }
Pero queda asi: (con el use)
Ahora vamos a CONFIGURAR BABEL.
Crear archivo ".babelrc"
-Ir a pagina de Babel, click en ".babelrc", click en "minify" en "install"
(Buscamos en la web "babel present minify" y copiamos lo de "install" en la terminal.
npm install babel-preset-minify --save-dev
En el archivo ".babelrc" pegamos:
ahora aparece ofuscado el codigo, pero tenemos que instalar otro paquete que haga que el codigo se haga como en ECMA script 5, que es soportado por todos los navegadores.
Vamos a buscar en web:
babel-minify-webpack-plugin (en github)
Copiamos y pegamos el install en la terminal: INSTALL
En "webpack.prod.js":
Ya lo ultimo (ya esta minificado, ahora para que lo pase al ecma script 5), buscamos en google:
@babel/preset-env
INSTALL:
npm install --save-dev @babel/preset-env
Y en ".babelrc":
"@babel/preset-env"
Quedaria asi:
npm run build
Y ya podemos ver que en nuestro archivo main.js ya esta "var" ya no esta "const", eso quiere decir que ya lo paso al ecmasrcipt 5.
6- BORRANDO LA CARPETA DIST
Cada vez que yo ejecuto el npm run build me va creando archivos "main.js".
En la pagina de "webpack" en la zona de "cleaning up the /dist folder".
https://webpack.js.org/guides/output-management/
INSTALL:
Completo el codigo de "webpack.config.js":
Completo el coidgo de "webpack.prod.js":
7- CONFIGURACION DE GIT EN NUESTRO
EQUIPO
En la terminal, para iniciar proyecto en Git:
git init
Creamos nuevo archivo:
.gitignore
Y alli vamos a decirle que archivos queremos que ignore:
Y ahora no va a estar pendiente de esos archivos, se ponen en gris (el archivo dist se ejecuta a traves de los comandos build del package.json).
- Git: preparate para tomar una foto a todos los archivos:
git add .
-Para tomar la fotografia:
git commit -m "Primer commit"
-A partir de aqui ya puedo recuperar mi proyecto completo, por ejemplo borro "src", ahora escribo:
git checkout -- .
Y recupero todo.
8- DESPLEGAR PROYECTO A GITHUB
GITHUB:
-Crear nuevo repositorio
-Vamos a usar los dos comandos de "...or push an existing repository..."
el git remote y el git push origin master
.Listo
---------------------------------------------------------------------------------------------------------------
README (Es como un html)
-En el proyecto:
Crear archivo:
README.md
Creamos nombre a proyecto:
9- GITHUB PAGES
Si yo quiero subir mi aplicacion no lo va a hacer.
Porque Github pages solo sube html, css y Js (react, angular y vue si), pero Node, Php, Java NO.
Solo html, Css y Js.
Ahora, entonces yo tendria que subir mi "Dist" que es la carpeta de produccion, pero no deberia subirlo porque es el producto del build.
Tenemos que crear, nos explica, un /docs
En terminal:
npm run build
-Voy a renombrar "dist" a "docs".
-Si hago git status me va a decir que hay un nuevo directorio que necesita que le hagan seguimiento.
-
git add .
git commit - m "docs creado"
git push
Ahora, me voy a Github, Settings, Github Pages, selecciono "master brunch"
REFRESCAR DE MANERA AUTOMÁTICA
Si yo hago un cambio en components.js y lo guardo, no lo voy a ver hasta que no haga npm run build.
Vamos a instalar un paquete que me cambie eso.
Asi se ven los cambios al instante
Instalamos EL SERVIDOR DE DESARROLLO DE WEBPACK
En la terminal:
npm i -D webpack-dev-server
Ahora, si me voy al package.json, en las dependencias esta, ahora vamos a escribir un nuevo script:
Tenemos que configurar alli un SERVIDOR DE DESARROLLO que la ruta que esta en el browser se vea lo mas parecida a lo que vamos a ver en produccion: http:// o htpps://
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server --open"
},
En terminal:
npm start
Y se refresca de manera automatica si hacemos cambios
HACE EL NPM RUN BUILD DE MANERA INSTANTANEA
NO CERRAR LA TERMINAL ! ! ! !
Se tiene que ver esto en consola:
CAMBIAR PUERTO:
Si el puerto esta ocupado:
"start": "webpack-dev-server --open --port=8081"
Y control c en terminal para poder escribir
Y otra vez:
npm start
4-IMPORTANDO ESTILOS DE FORMA
DINÁMICA
Hay 2 formas de trabajar con estilos:
1-Cargar estilos de manera dinámica
2-Tener estilos globales.
Click derecho en "src" ---> Crear carpeta "css" --> Crear archivo "componentes.css"
El mismo nombre de componentes.js pero para el css.
Vamos a agregar estilos para el h1 muy básicos:
h1{
color: red;
}
Si no tenemos abierta la app, con poner "npm start", nos lanza la app en el browser.
Hay que decir a Webpack que mueva ese archivo y lo COLOQUE EN EL BUNDLED DE LA APP.
1- Vamos a decirle que importe ese "componentes.css" cuando requerimos el "componentes.js"
Para eso vamos a tener que instalar un para de paquetes:
"css-loader" nos va a permitir minificarlo, inyectarlo para ponerlo en nuestro bundled.
Y el "style-loader".
Entre los dos van a hacer el trabajo.
En terminal:
npm i -D css-loader style-loader
Vamos a ver que estan instalados en el paquete de dependencias:
"css-loader": "^4.2.1",
"html-loader": "^1.2.0",
"html-webpack-plugin": "^4.3.0",
"style-loader": "^1.2.1",
A - "IMPORTAR" Ahora, en mi "componentes.js" voy a importar ese archivo css:
import '../css/componentes.css';
export const saludar = ( nombre ) => {
console.log('Saludando desde console');
const h1 = document.createElement('h1');
h1.innerText = `Mi nombre es ${ nombre }`;
document.body.append(h1);
}
B- "CONFIGURAR"
Vamos a nuestro archivo de configuracion "webpack.config.js" y vamos a escribir un par de reglas.
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
Entero:
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.html$/i,
loader: 'html-loader',
options: {
attributes: false,
minimize: false
},
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html'
}),
]
}
Ahora,
1-Vamos a borrar la carpeta "dist"
2- Ejecutamos "npm run build"
3-Si vamos a "dist" --> "main.js" y buscamos(ctrl + f ) "red" (nuestro estilo del h1) vamos a ver que aparece y que nos lo esta importando como si fuera una libreria de javascript.
4- Abrimos otra vez "npm start"
Lo esta aplicando de manera dinámica.
Ahora se guardan los cambios del CSS de manera dinámica.
4-CREANDO ARCHIVO DE ESTILOS DE
FORMA GLOBAL EN LA APP
Vamos a crear un archivo global de CSS en mi app.
Y que ese archivo global este importado en mi archivo de index.html y en mi carpeta de distribucion(dist).
1- En la carpeta "src" voy a crearme un archivo "styles.css".
En muchos frameworks es asi, si por ejemplo le pongo un color de fondo negro, y recargo no me esta aplicando los estilos.
Tengo que decirle que tiene que cargar los estilos.
2- Me voy a "Index.js" en "src" y le voy a decir que cargue los estilos, asi:
import { saludar } from './js/componentes';
import './styles.css';
const nombre = 'Max';
saludar(nombre);
Ahora, se me aplican los cambios, y si me voy a "Main.js" y lo busco (ctrl + f) lo voy a encontrar, sigue cargandose como una libreria, pero yo quiero que ese archivo este en "dist", de manera independiente y que tambien lo coloque en el index de "dist"
3-Para eso vamos a hacer unas instalciones, vamos a instalar un plugin:
En terminal:
npm i -D mini-css-extract-plugin
Cuando dice "Plugin" tenemos que hacer algo muy parecido a lo anterior, en el archivo "webpack.config.js":
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
Y 4- Vamos a poner otra regla adicional, porque aunque es CSS voy a tener que usarlo de otra manera diferente:
{
test: /styles\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
},
Y ese archivo css , que es el styles, lo vamos a excluir arriba porque sino, al aplicarle la regla arriba (ya que es un archivo css) nunca llegaria a esta regla:
{
test: /\.css$/,
exclude: /styles\.css$/,
use: [
'style-loader',
'css-loader'
]
},
Y abajo, le digo como va a atrabajar:
new MiniCssExtractPlugin({
filename: '[name].css',
ignoreOrder: false
})
Completo, el archivo de "webpack.config.js" quedaria asi:
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
module: {
rules: [
{
test: /\.css$/,
exclude: /styles\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /styles\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test: /\.html$/i,
loader: 'html-loader',
options: {
attributes: false,
minimize: false
},
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html'
}),
new MiniCssExtractPlugin({
filename: '[name].css',
ignoreOrder: false
})
]
}
Por ultimo, en terminal:
npm run build
Me acaba de CREAR "MAIN.CSS" EN "DIST"
B-Minimizar "main.css" (para despues para
produccion)
Si yo ahora escribo en webpack.config.js : "production" en vez de "development"
y ahora corro el "npm run build" y voy a "main.css" voy a ver que no esta minificado.
Para eso tengo que instalar otro paquete.
Me voy a la terminal:
npm i -D optimize-css-assets-webpack-plugin
Ahora, en "webpack.config.js" vamos a cargar arriba el plugin, (como todos los plugins)
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
Abajo de mode:
optimization: {
minimizer: [ new OptimizeCssAssetsWebpackPlugin() ]
},
Y si ahora corro el "npm run build" voy a ver que esta minificado el css.
Si despues lo pongo en mode "development" y corro "npm run build" ya me va a dejar normal el archivo.
5- MANEJO DE IMÁGENES
1- Dentro del directorio "src" vamos a crear un directorio llamado "assests" y dentro vamos a guardar una imagen cualquiera de la web.
2- Ahora, la coloquemos en el html:
<img src="./assets/imagen.png" alt="">
Ahora, no se ve, tenemos que decirle al webpack que queremos trabajar con imágenes.
Tenemos que instalar algo, vamos a la terminal:
npm i -D file-loader
Ahora, vamos a "webpack.config.js" y vamos a fijar una regla, vamos a decirle que evalue cualquier cosa que yo quiera mover, cualquier assets.
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
esModule: false
}
}
]
}
Ahora, tenemos que instalar otro paquete, porque asi no va a funcionar:
En la terminal:
npm i copy-webpack-plugin --save-dev
Ahora vamos a hacer una pequeña configuracion en "webpack.config.js"
const CopyPlugin = require('copy-webpack-plugin');
Abajo:
new CopyPlugin([
{ from:'src/assets', to: 'assets/' }
])
Total:
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
mode: 'development',
optimization: {
minimizer: [ new OptimizeCssAssetsWebpackPlugin() ]
},
module: {
rules: [
{
test: /\.css$/,
exclude: /styles\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /styles\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test: /\.html$/i,
loader: 'html-loader',
options: {
attributes: false,
minimize: false
},
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
esModule: false
}
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html'
}),
new MiniCssExtractPlugin({
filename: '[name].css',
ignoreOrder: false
}),
new CopyPlugin({
patterns: [
{ from:'src/assets', to: 'assets/' },
],
}),
]
}
-Borrar carpeta "dist".
-npm start
-Ahi tenemos la imagen !.
(NO ME CREA CARPETA ASSETS EN DIST).
6- PRODUCTION MODE
Me voy a "webpack.config.js", escribo en "mode" "production", corro "npm run build", si veo el main.js no esta minificado, el css si.-Crear un nuevo archivo en raiz que se llame "webpack.prod.js" donde TENGAMOS LA CONFIGURACION SOLO DE PRODUCCION.
-Copiar todo lo de "webpack.config.js" a "webpack.prod.js" y cambiamos algunas cosas:
1- 'development' a 'production'.
2- Output , filename: main.abc.js (abc para ponerle algo, ira un hash).
module.exports = {
mode: 'production',
optimization: {
minimizer: [ new OptimizeCssAssetsWebpackPlugin() ]
},
output: {
filename: 'main.abc.js'
},
Y en "package.json" le vamos a especificar el nombre del archivo.
"build": "webpack --config webpack.prod.js",
Ejecuto "npm run build" (podemos borrar antes "dist" para ver bien los cambios).
Ahora veo en "dist" que esta el "main.abc.js".
Y ahora si no quiero perder la configuracion de desarrollo, escribo ahi mismo en "package.json":
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.prod.js",
"build:dev": "webpack --config webpack.config.js",
"start": "webpack-dev-server --open"
},
Ahora "npm run build" ya hora me aparecen en "dist": "main.js" y "main.abc.js".
Ahora, para que se actualize la cache en el navegador del cliente, webpack nos crea el "contentHash".
Lo escribimos asi:
output: {
filename: 'main.[contentHash].js'
},
npm run build
Se creo un nuevo archivo main con ese hash.
Vamos a hacer lo mismo con el CSS:
new MiniCssExtractPlugin({
filename: '[name].[contentHash].css',
ignoreOrder: false
}),
npm run build
Y esta.
6- INSTALACION Y CONFIGURACION DE
BABEL
Todavia tenemos 2 problemas:
1-Si estamos en un navegador muy viejo, todavia no soporta las constantes y me va a dar un error.
2-Tenemos que arreglar lo que nos minifique el main.js (solo minifica el main.css).
BABEL nos pasa del codigo moderno al codigo antiguo de Js para que lo soporten todos los navegadores.
1-Ir a Babel.
2- Ir a Setup
3- Ir a Webpack
Vamos a la terminal y pegamos esos comandos:
npm install --save-dev babel-loader @babel/core
Ahora me voy a "webpack.prod.js".
Vamos a crear una nueva regla y como Babel trabaja con Js solo va a afectar a los archivos de Js.
Escribimos nueva regla:
Copiamos tambien de la web de Babel:
module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ] }
Pero queda asi: (con el use)
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
'babel-loader'
]
},
Ahora vamos a CONFIGURAR BABEL.
Crear archivo ".babelrc"
-Ir a pagina de Babel, click en ".babelrc", click en "minify" en "install"
(Buscamos en la web "babel present minify" y copiamos lo de "install" en la terminal.
npm install babel-preset-minify --save-dev
En el archivo ".babelrc" pegamos:
{
"presets": ["minify"]
}
ahora aparece ofuscado el codigo, pero tenemos que instalar otro paquete que haga que el codigo se haga como en ECMA script 5, que es soportado por todos los navegadores.
Vamos a buscar en web:
babel-minify-webpack-plugin (en github)
Copiamos y pegamos el install en la terminal: INSTALL
npm install babel-minify-webpack-plugin --save-devY despues vemos el Usage, vamos a hacerle caso: USAGE
En "webpack.prod.js":
Y en los plugins:const MinifyPlugin = require("babel-minify-webpack-plugin");
new MinifyPlugin()
Ya lo ultimo (ya esta minificado, ahora para que lo pase al ecma script 5), buscamos en google:
@babel/preset-env
INSTALL:
npm install --save-dev @babel/preset-env
Y en ".babelrc":
"@babel/preset-env"
Quedaria asi:
{
"presets": ["@babel/preset-env", "minify"]
}
npm run build
Y ya podemos ver que en nuestro archivo main.js ya esta "var" ya no esta "const", eso quiere decir que ya lo paso al ecmasrcipt 5.
6- BORRANDO LA CARPETA DIST
Cada vez que yo ejecuto el npm run build me va creando archivos "main.js".
En la pagina de "webpack" en la zona de "cleaning up the /dist folder".
https://webpack.js.org/guides/output-management/
INSTALL:
npm install --save-dev clean-webpack-pluginconst { CleanWebpackPlugin } = require('clean-webpack-plugin');new CleanWebpackPlugin(),Completo el codigo de "webpack.config.js":
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
mode: 'development',
optimization: {
minimizer: [ new OptimizeCssAssetsWebpackPlugin() ]
},
module: {
rules: [
{
test: /\.css$/,
exclude: /styles\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /styles\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test: /\.html$/i,
loader: 'html-loader',
options: {
attributes: false,
minimize: false
},
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
esModule: false
}
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html'
}),
new MiniCssExtractPlugin({
filename: '[name].css',
ignoreOrder: false
}),
new CopyPlugin({
patterns: [
{ from:'src/assets', to: 'assets/' },
],
}),
]
}
Completo el coidgo de "webpack.prod.js":
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const MinifyPlugin = require("babel-minify-webpack-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
mode: 'production',
optimization: {
minimizer: [ new OptimizeCssAssetsWebpackPlugin() ]
},
output: {
filename: 'main.[contentHash].js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
'babel-loader'
]
},
{
test: /\.css$/,
exclude: /styles\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /styles\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test: /\.html$/i,
loader: 'html-loader',
options: {
attributes: false,
minimize: false
},
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
esModule: false
}
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html'
}),
new MiniCssExtractPlugin({
filename: '[name].[contentHash].css',
ignoreOrder: false
}),
new CopyPlugin({
patterns: [
{ from:'src/assets', to: 'assets/' },
],
}),
new MinifyPlugin(),
new CleanWebpackPlugin(),
]
}
7- CONFIGURACION DE GIT EN NUESTRO
EQUIPO
En la terminal, para iniciar proyecto en Git:
git init
Creamos nuevo archivo:
.gitignore
Y alli vamos a decirle que archivos queremos que ignore:
node_modules/
dist/
Y ahora no va a estar pendiente de esos archivos, se ponen en gris (el archivo dist se ejecuta a traves de los comandos build del package.json).
- Git: preparate para tomar una foto a todos los archivos:
git add .
-Para tomar la fotografia:
git commit -m "Primer commit"
-A partir de aqui ya puedo recuperar mi proyecto completo, por ejemplo borro "src", ahora escribo:
git checkout -- .
Y recupero todo.
8- DESPLEGAR PROYECTO A GITHUB
GITHUB:
-Crear nuevo repositorio
-Vamos a usar los dos comandos de "...or push an existing repository..."
el git remote y el git push origin master
.Listo
---------------------------------------------------------------------------------------------------------------
README (Es como un html)
-En el proyecto:
Crear archivo:
README.md
Creamos nombre a proyecto:
# Webpack Base
# Webpack Base
Este es el poryecto base o inicial para crear aplicaciones utilizando Webpack.
### Notas:
Recuerden reconstruir los módulos de Node:
```
npm install
```
Y para construir el build, recuerden:
```
npm run build
```
9- GITHUB PAGES
Si yo quiero subir mi aplicacion no lo va a hacer.
Porque Github pages solo sube html, css y Js (react, angular y vue si), pero Node, Php, Java NO.
Solo html, Css y Js.
Ahora, entonces yo tendria que subir mi "Dist" que es la carpeta de produccion, pero no deberia subirlo porque es el producto del build.
Tenemos que crear, nos explica, un /docs
En terminal:
npm run build
-Voy a renombrar "dist" a "docs".
-Si hago git status me va a decir que hay un nuevo directorio que necesita que le hagan seguimiento.
-
git add .
git commit - m "docs creado"
git push
Ahora, me voy a Github, Settings, Github Pages, selecciono "master brunch"
No hay comentarios:
Publicar un comentario