Webpack es un module bundler. Los module bundlers son herramientas para frontend devs que suelen usarlo para empaquetar los JS modules en un único archivo de JS que pueda ser ejecutado por el navegador.
Las razones principales por que se usan webpack son:
Algunos navegadores no soportan el sistema de modulos.
Te ayudan a manejar las relaciones de dependencias con tu código.
Ayudan a cargar assets en orden de dependencias, imágenes, css, etc.
Tener en cuenta que webpack es una filosofía que nos va permitir trabajar de forma modular. Es como menter todo lo que vamos a necesitar en un proyecto en una caja y después poder sacar todo listo para producción.
Una forma de usar webpack https://createapp.dev/webpack/no-library
mkdir nomcarpeta
cd nomcarpeta
git init Iniciamos repositorio git
npm -y iniciamos npm en el proyecto
code . Abrimos el codigo en VSC
npm install webpack webpack-cli -D instala en terminal dentro del proyecto el webpack
npx webpack ejecuta el webpack el proyecto
npx webpack --mode development modo desarrollo
npx webpack --mode production modo produccion
para automatizar vamos a package.json y añadimos
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production"
},
Luego en la terminal ejecutamos npm run build
Para clonar un proyecto git clone https://pag.com
---------------------
Babel
Sirve para tranformar nuestro código JS a un código que cualquier navegador o Node.js pueda entender
npm install babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime instalo babel loader -D
/\.m?js$/ es una expresión regular que indica; los archivos que terminen con mjs o jsnpm build para correr programa
--------------
html
npm install html-webpack-plugin -D
----------------
CSS
npm install mini-css-extract-plugin css-loader -D
npm run dev luego de editar en el codigo html quitando la ruta css, el main.js y el webpack.config.js
npm install stylus -D instala stylus
npm install stylus stylus-loader -D
---------------------------------------
Para saas
npm i -D node-sass sass-loader
Añadimos el loader al arreglo de loaders y modificamos un poco la expresion regular
{
test: /\.s?css$/,
use: [MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"]
},npm i copy-webpack-plugin -D plugin para copia en webpack
