Webpack

¿Qué es Webpack? 

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.

link https://webpack.js.org/concepts/

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 js

npm 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