¿Cómo crear un proyecto con webpack?

Hola coders, todavía estoy entrando al mundo de las nuevas tecnologías, pero me faltaba aprender algo más y pues llegue al punto de ella, webpack para compilar 5 archivos de JavaScript en un archivo (all in one), así como también los archivos de CSS.

Conceptos

En el core, webpack es un paquete de módulos estáticos para aplicaciones JavaScript modernas. Cuando webpack procesa su aplicación, crea internamente un gráfico de dependencia que mapea cada módulo que su proyecto necesita y genera uno o más paquetes .

En esencia, webpack es un paquete de módulos estáticos para aplicaciones JavaScript modernas. Cuando webpack procesa su aplicación, crea internamente un gráfico de dependencia que mapea cada módulo que su proyecto necesita y genera uno o más paquetes .

Vamos crear un “hellowebpack”.

Mi directorio.

Vamos a crear 3 directorios

• webpack-demo
• dist
• src

1- Ahora bien, vamos a crear un directo con el nombre webpack-demo en tú escritorio. Luego dentro del directorio webpack-demo vamos crear los dos directorios faltantes dist y src.

2 Vamos a ejecutar los siguientes comando dentro del directorio webpack:

npm init -y
npm install webpack webpack-cli --save-dev
npm install --save lodash

Al momento de crearse el package.json vamos a la siguiente línea y la eliminamos:

"main": "index.js",

Y la cambiamos por lo siguiente:

"private": true,

3 Vamos crear un archivo con el nombre webpack.config.js y tipeamos lo siguiente dentro del archivo.

4 Ahora dentro de los siguientes archivos vamos a tipear lo siguiente de las capturas de pantalla.

En index.js que esta dentro del directorio src:

En showDialog.js vamos a tipear lo siguiente:

5 Abrimos la consola de VSC y tipeamos lo siguiente:

npm run build

Y listo coders, tenemos una app creado con webpack.

Muy recomendable para los diseñadores web para compilar sus archivos.

Repo: https://github.com/angeldelacruzdev/my-webpack-skeleton