Configuración de Webpack y Babel para Proyectos con HTML y JavaScript

Script correcto.

"scripts": {
    "build":"webpack --mode production",
    "start": "webpack-dev-server --open --mode development"
  },

webpack,config.js

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: 'main.js'
    },
    resolve: {
        extensions: ['.js']
    },
    module:{
        rules:[{
            test: /\.js?$/,
            exclude: /node_modules/,
            use:{
                loader: 'babel-loader'
            }
        }]
    },
    plugins: [
        new HtmlWebPackPlugin([
            {
                inject: true,
                template: './public/index.html',
                filename: './index.html',
            }
        ])
    ]

}

Si el main en dist te crea solo con el console.log(“Hello”), esto se debe a un problema con las versiones de Webpack
Haz lo siguiente en la terminal (en el current workspace):
`

npm uninstall wepback
npm uninstall wepback-cli

`

Lo que pasó fue que borraron las versiones desactualizadas
Ahora se intalará lo correcto con el siguiente comando:
`

npm i webpack@4 webpack-cli@3
`

Esta solución la encontró marcelo-vargas-avila, pero como estaba en un hilo aparte decidí ponerla acá jaja

Para los que tienen el problema que tras correr el comando “npm run build” el arcivo main.js les queda igual que el archivo index.js aca esta el ¿por que?..

1)Tras la actualizacion a webpack 5 debemos instalar las siguientes dependdencias de babel: “npm install @babel/core babel-loader @babel/preset-env”.

2)Luego debemos generar en la raiz del proyecto el archivo “babel.config.json” alli debemos agregar lo siguiente:

{
  "presets": [
    "@babel/preset-env"
  ]
}

1. Luego vamos al archivo "webpack.config.js y agregamos la siguiente regla:

      { // Estructura de Babel
        test: /\.m?js$/, //Nos permite identificar los archivos según se encuentran en nuestro entorno.
        exclude: /node_modules/, //Excluimos la carpeta de node modules
        use: {
          loader: 'babel-loader',//Utilizar un loader como configuración establecida.
          }
      }

Al llegar a este paso y correr el comando “npm run build” se daran cuenta de que sigue igual el resultado de main.js, y es porque tras la actualizacion, babel solo agrega el resto de codigo cuando usamos sintaxys moderna de JavaScripts.

Como prueba agreguen el siguiente codigo en el archivo index.js:

console.log("Hello webpack!");

const fancyFunc = () => {
  return [1, 2];
};

const [a, b] = fancyFunc();

Ahora compilen y veran que el archivo main.js si viene completo, porque estamos empleando una arrow function y es necesario hacer el codigo compatible con el resto de navegadores…

Alguien sabe porque mi main.js se creó solo con el console.log('Hello');
es normal? Es que a Oscar se le creó con más código.

Les comparto esta herramienta online que nos ayuda para crear un archivo .gitignore https://www.gitignore.io/

Este curso y el de webpack deben ser revisados urgentemente para su actualizacion.

al día de hoy este script no funciona

"scripts": {
    "dev": "webpack-dev-server --open --mode development"
  },

en mi caso fue posible de esta forma

"scripts": {
    "dev": "webpack serve --open --mode development"
  },

esta configuración también la puedes crear en webpack

mode: 'development',
devServer: {
   port: 9000,
   open: true
},

nuestro script quedaría de la siguiente forma

"scripts": {
“dev”: “webpack serve”
},

Siento que no entiendo ni mergas… había dejado js por una semana por hacer el curso de mobile first y por que estuve en cama, pero siento que está muy complejo esto, no se si es el profe o yo, no se como hay gente que le entiende todo, serán nuevos o ya habrán visto esto con otros profes, en la vida real, etc…justo hoy veía el video de Freddy donde hablaba de la decepción realista, y hay que sobrepasarlo que es crucial ese punto, se me aparecen de vez, en cuando y seguirán haciéndolo seguro…no quiero quedarme solo en html, css y js básico la verdad, así que continuaré…

Actualizado a diciembre del 2021

• Comando para instalar las dependencias:

npm i @babel/core babel-loader @babel/preset-env html-webpack-plugin webpack webpack-cli webpack-dev-server --save-dev

• Configuraciones para el archivo webpack.config.js:

// Permitir traer path. Acceder dentro de la carpte no importa el lugar donde se encuentre
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    },
    resolve: {
        extensions: ['.js'],
    },
    module: {
        rules: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            ['@babel/preset-env', {targets: "defaults"}]
                        ]
                    }
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin([
            {
                inject: true,
                template: './public/index.html',
                filename: './index.html'
            }
        ])
    ]
}

• Scripts en el archivo package.json:

"build": "webpack --mode production",
"start": "webpack-dev-server --open --mode development"

MI SOLUCIÓN PARA LOS PROBLEMAS QUE TUVE AL HACERLO EN EL 2021

1.- INICIE DESDE 0 E INSTALE CADA UNO DE LOS COMPONENTES QUE NECESITABA EN FUNCIÓN DE LA INFORMACIÓN DISPONIBLE, CON ESTOS CODIGOS

npm install -D babel-loader @babel/core @babel/preset-env --save-dev
npm i webpack@4 webpack-cli@3
npm install --save-dev html-webpack-plugin
npm install --save-dev webpack-cli

2.- EL FORMATO DEL ARCHIVO WEBPACK.COFIG LO HICE SOLO CON UNA LEVE MODIFICACIÓN

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/index.js',
    output: {
      path: __dirname + '/dist',
      filename: 'main.js'
    },
    
    resolve: {
      extensions: ['.js'],  
    },
    
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                }
            }
        ]
    },
    plugins: [
      new HtmlWebpackPlugin([
          {
              inject:true,
              template:'./public/index.html',
              filename: './index.html'
          }
      ])
    ]
  }

AGOSTO 2021. He recopilado soluciones.

Si el archivo main.js se te queda igual y no se te crea el archivo index.html. Haz esto:

1. Desinstala las dependencias corriendo esto en el terminal:

npm uninstall wepback
npm uninstall wepback-cli
npm uninstall html-webpack-plugin

1. Instala de nuevo estas:

npm i webpack@4 webpack-cli@3
npm i html-webpack-plugin@4

1. Saca el archivo webpack.config.js de la carpeta src y ponlo en la raíz, fuera de todas las carpetas.

Vuelve a probar.

Los comando que recomiendo Iván están bien pero ahora surge el problema de que no son compatibles con el html-webpack-plugin, pero es fácil resolverlo:

desístala el html-webpack-plugin con:

• npm uninstall html-webpack-plugin

y ahora instala la versión compatible con webpack:

• npm i --save-dev html-webpack-plugin@4

y listo vuelve a correr tu npm run build y todo de maravilla.

Veo una inconsistencia a la hora de las dependencias instaladas, todas están desactualizadas y no existe un lugar en los cursos donde den una respuesta rápida para poder seguir con el curso, comprendo que fomenta la lectura, pero dada las circunstancias de la manera de explicar de los profesores, en varios cursos se mezclan temas que uno no los tocó de cerca, en lo personal me gustaría una red de respuestas más cercana.

Para los que les parezca un error por no encontrar index.js a la hora de ejecutar el script build, en mi caso lo resolví poniendo una diagonal en el archivo webpack de esta forma.

entry: './src/index.js',

Sospecho que el profesor arregla ciertos errores sin mostrarlos, varias veces con él me arroja error a lo que a él sí le funciona bien. En este caso no es --modo sino --mode.

¿mi main.js me regresa tal cual lo que escribo en el src/index.js?

tendran alguna idea de por que

Qué plugin utiliza para que se le cierren las etiquetas html dentro de las comillas francesas?

Para realizar el curso con los módulos actualizados pueden seguir este proceso (fue tomado de varios de los post y de la lectura de la documentación):

1. Inicializar el proyecto de NPM:

npm init -y

1. Instalación de los paquetes NPM:

npm install @babel/core babel-loader html-webpack-plugin webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env --save-dev

1. El archivo ‘package.json’ debe contener lo siguiente:

    {
        "name": "single-page-application",
        "version": "1.0.0",
        "description": "Curso de Platzi - Single Page Application",
        "main": "index.js",
        "scripts": {
            "watch": "webpack --watch",
            "build": "webpack --mode production",
            "start": "webpack serve --open --mode development"
        },
        "repository": {
            "type": "git",
            "url": "git+https://github.com/kannder83/single-page-application.git"
        },
        "keywords": [],
        "author": "kannder83 <[email protected]>",
        "license": "MIT",
        "bugs": {
            "url": "https://github.com/kannder83/single-page-application/issues"
        },
        "homepage": "https://github.com/kannder83/single-page-application#readme",
        "devDependencies": {
            "@babel/core": "^7.14.6",
            "@babel/preset-env": "^7.14.7",
            "babel-loader": "^8.2.2",
            "html-webpack-plugin": "^5.3.2",
            "webpack": "^5.42.1",
            "webpack-cli": "^4.7.2"
        }
    }

1. Crear el archivo de configuración de webpack:

touch webpack.config.js

1. Dejar dentro del archivo ‘webpack.config.js’ la siguiente configuración:

    const path = require("path");
    const HtmlWebpackPlugin = require("html-webpack-plugin");

    module.exports = {
    mode: "development",
    entry: "./src/index.js",
    output: {
        filename: "main.js",
        path: path.resolve(__dirname, "dist"),
    },
    devServer: {
        contentBase: "./dist",
    },
    plugins: [
        new HtmlWebpackPlugin({
        inject: true,
        template: "./public/index.html",
        filename: "./index.html",
        }),
    ],
    module: {
        rules: [
        {
            test: /\.m?js$/,
            exclude: /node_modules/,
            use: {
            loader: "babel-loader",
            options: {
                presets: ["@babel/preset-env"],
            },
            },
        },
        ],
    },
    };

1. Crear archivo de configuración de Babel:

	touch babel.config.json

1. Agregar la siguiente información:

    {
    "presets": ["@babel/preset-env"]
    }

1. Crear la carpeta ‘src’ y archivo en la carpeta ‘index.js’:

    mkdir src
    touch src/index.js

1. Ejecutar el comando ‘build’ para crear los archivos:

	npm run build

Puede que el curso este desactualizado, pero véanlo como un reto para seguir.

Buenas tengo en el main.js me copia exactamente la misma linea de codigo del index.js

alguien tiene alguna solucion

"scripts": {
    "build": "webpack --mode production",
    "start": "webpack-dev-server --open --mode development"

  }

//Nos permite acceder a donde estámos en las carpetas. Ya sea en local o en la nube.
const path = require('path');
//Archivo necesario para trabajar con HTML que lo requerimos del paquete que instalamos
const HtmlWebPackPlugin = require('html-webpack-plugin');

//Aquí se encuentra toda la configuración de lo que va a suceder y sera el modulo para exportar.
module.exports = {
    //Punto de entrada con su dirección y es aquí donde vive el código inicial y de aquí parte al desarrollo.
    entry: './src/index.js',
    //Donde se envía el proyecto estructurado y compilado listo para producción, este sera un objeto
    output:{
        //Ponemos la ruta del lugar donde se exportara el proyecto, usando el path que importamos
        //con el dirname le decimos que donde se encuentre esta carpeta ahi creara la carpeta dist = distribution
        path: path.resolve(__dirname, 'dist'),
        /*le diremos como se llamaremos el archivo que vamos a crear donde estara el compilado final cuando
        envienmos a produccion*/
        filename: 'main.js'
    },
    /*trabajaremos sobre las extenciones que va a utilizar nuestro proyecto donde usaremos resolve
    generando otro objeto*/
    resolve: {
        /*Pasamos un arreglo de las extenciones que vamos a utilizar*/
        extensions: ['.js'],
    },
    /*creamos un modulo con las reglas necesarias de babel*/
    module:{
        /*estas seran las reglas que pasaremos por medio de un arreglo*/
        rules: [
            //Elementos que necesitamos
            {
                /*Estructura de babel generando un test de como vamos a identificar estos archivos*/
                /*test que va a tener regex para establecer valores que queremos filtral de una ruta,
                de unos elementos o de los archivos que vamos a estar utilizando 
                / punto de entrada - extenciones js */
                test: /\.js?$/,
                //Exluimos la carpeta node_modules y todos los archivos js
                exclude: /node_modules/,
                /*utilizamos un loader o una configuracion establecida para trabajar todo nuestro codigo
                y es que el loader que instalamos de babel*/
                use: {
                    loader: 'babel-loader',
                }
            }

        ]
    },
    //necestiamos establecer los plugin que vamos a utilizar
    /*webpack plugin de html que nos va a permitir trabajar con estos archivos pasando un arreglo*/
    plugins: [
        /*instanciamos el plugin de html que instanciamos a inicio de este documento, pasandoles un 
        arreglo y despues un objeto que vamos a llenar con la configuracion*/
        new HtmlWebPackPlugin([
            {
                //inject como vamos a un archivo html a injectar un valor 
                inject: true,
                //necesimos un template principal y le damos una ruta de este template base de html
                template: './public/index.html',
                /*ahora le decimos donde tiene que guardarlo y seria nuestra carpeta dist donde le damos
                un nombre*/
                filename: './index.html',
            }
        ])

    ]
}```

const Home = () => {
    const view = `
        <div class="Characters">
            <article class="Character-item">
                <a href="#/1/">
                    <img src="image" alt="name">
                    <h2>Name</h2>
                </a>
            </article>
        <div>
    `;
    return view;
};

export default Home;```

Webpack5 webpack-cli4 presentará errores, (Curso desactualizado).
Desinstalar ambas con npm uninstall wepback y npm uninstall wepback-cli, luego instalar las versiones específicas con el siguiente comando npm i webpack@4 webpack-cli@3 .

Me pueden apoyar con este error al** ejecutar npm run build**

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: webpack --mode production
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\xaavi\AppData\Roaming\npm-cache_logs\2020-04-09T22_09_36_271Z-debug.log

Archivo package.json

{
  "name": "cientifico",
  "version": "1.0.0",
  "description": "Single Page Application",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --open --mode development"
  },
  "keywords": [
    "Javascript"
  ],
  "author": "Javier Quiñones <[email protected]>",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "babel-loader": "^8.1.0",
    "html-webpack-plugin": "^4.2.0",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    },
    resolve: {
        extensions: ['.js'],
    },
    //SETTING BABLE RULES
    module: {
        rules: [
            {
                // SETTING REGEX FOR .JS FILES
                test: /\.js?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                }
            }
        ]
    },
    //SETTING PLUGINS
    plugins: [
        new HtmlWebpackPlugin([
            {
                inject: true,
                template: './public/index.html',
                filename: './index.html',
            }
        ])
    ]
}```

La especialidad de este “profe” es hacerlo todo a las prisas, a las carreras, sin explicar bien y con muchos errores, el curso está desactualizado y de no ser por las colaboraciones de los alumnos no seria posible continuarlo, por que el profe no se tomo la molestia de siquiera poner las correcciones en los comentarios … mal ahí ,

Para todos los que estén iniciando este curso después de años de haber salido, tendrán problemas si instalan las versiones actualizadas y colocan configuraciones desactualizadas.
Lo “mejor”, para poder seguir el curso sin problemas, es colocar las mismas dependencias que el profesor, si van al package.json que está en los recursos de la clase, podrán copiarlos.
En este caso son estos:

“devDependencies”: {
"@babel/core": “^7.7.5”,
“babel-loader”: “^8.0.6”,
“html-webpack-plugin”: “^3.2.0”,
“webpack”: “^4.41.2”,
“webpack-cli”: “^3.3.10”,
“webpack-dev-server”: “^3.9.0”
}

Primero borren su carpeta “node_modules” y, después de haber pegado estas dev dependencies en su package.json (también debes borrar las devDependencies que tengas anteriormente antes de pegar éstas), ejecuten el comando “npm isntall”, lo cual, hará que se instalen todas las dependencias en su package.json, con dichas versiones desctualizadas.
Debido a que, son versiones con paquetes “obsoletos”, npm avisará que tienen vulnerabilidades, pero básicamente es por estos paquetes en estado deprecated.
Por último, dentro del archivo webpack.config.js me marcaba algún tipo de error en:

test: /.js?$/

Éste lo cambié a:

test: /.m?js$/,

Después de haber hecho todo esto pude trabajar sin problemas, espero les sirva. 😅😅😅

Porque el header va dentro de la clase Main?

es un poco avanzado… diento que no entiendo bien como hacer una app spa … 😦

Avanzandoo…

Pues no sé por qué pero cuando corria el script build la consola me decia que no encontraba el entrypoint, so, lo declare mas especificamente en el archivo webpack y fucncionó. PD: será porque estoy usando windows? 🤓

...
  entry: path.resolve(__dirname, './src/index.js'),
...

Si no les funciona la guía de este curso. Pueden buscar tambien en internet ejemplos de como hacer una SPA con webpack y luego simplemente tratar de usar la api que usan en el curso. Así de paso aprendes como llevar estos conocimientos a un entorno no tan perfecto.

MUY IMPORTANTE!!

para solucionar el problema que no genera el archivo index.html
Saquen el archivo ¨webpack.config.js¨ de la carpeta ¨src¨ y ponganlo en la raiz, o sea fuera de todas las capertas. debe estar a compañando a las carpetas, y no dentro de ningúna.

son cosas de la nueva versión

AYUDA! El comando npm run build no me genera el archivo index.html dentro de la carpeta dist.
Me genera la carpeta dist y un archivo main.js, pero el index.html no!
(Tengo el template del index.html dentro de la carpeta public)

Este es el codigo del webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  resolve: {
    extensions: ['.js'],
  },
  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin([
      {
        inject: true,
        template: './public/index.html',
        filename: './index.html',
      }
    ])
  ]
}

Y este es el package.json

{
  "name": "cientifico",
  "version": "1.0.0",
  "description": "single page aplication",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode production",
    "start": "webpack-dev-server --open --mode development"
  },
  "keywords": [
    "javascript"
  ],
  "author": "Hefes",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "babel-loader": "^8.1.0",
    "html-webpack-plugin": "^4.2.0",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^15.9.1",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}```

Consideren esto en caso de tener error al correr el comando npm run build:

El error que estás experimentando indica que hay una propiedad incorrecta en la configuración de Webpack. En particular, está mencionando que la propiedad extension no es reconocida en la configuración de resolución (resolve).

Para solucionar este error, debes revisar tu archivo de configuración de Webpack y corregir la propiedad extension a su nombre correcto, que es extensions (en plural). Asegúrate de que esté escrita correctamente y que contenga un array de extensiones válidas para tus archivos JavaScript. Por ejemplo:

javascript
Copy code
resolve: {
extensions: [’.js’, ‘.jsx’] // Agrega aquí las extensiones necesarias para tus archivos JavaScript
},
Recuerda que la propiedad extensions permite especificar las extensiones de archivo que Webpack debe resolver automáticamente al importar módulos en tu proyecto. Asegúrate de utilizar la sintaxis correcta y agregar las extensiones adecuadas para tus archivos JavaScript.

Una vez que hayas realizado los cambios necesarios, guarda el archivo de configuración y vuelve a ejecutar el comando npm run build. Debería resolver el error y permitir que la compilación se realice correctamente.

Si sigues teniendo problemas, verifica también que estés utilizando una versión compatible de Webpack y que estés siguiendo las pautas de configuración adecuadas para tu proyecto.

Help!!! Pues ya me dieron las 3 am y nomás no encuentro el error 😦

webpack.config.js

<code>
const path = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
/**archivo que se instalo y que es necesario para trabajar con html te permite acceder a las carpetas */

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
       /*nombre del archivo para produccion*/
        filename: 'main.js'
    },

    /**extensiones del proyecto*/

    resolve: {
        extensions: ['.js'],
    },

    module: {
        rules: [
            {
                /**estructura de babel */
                test: /\.js?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                }
            }
        ]
    },

    /**plugins de html */
    plugins:  [
        new HtmlWebpackPlugin([
            {
            inject: true,
            template: './public/index.html',
            filename:'./index.html',
        }
    ])
    ]

}
</code>

Y el de package.json

<code>
{
  "name": "cientifico",
  "version": "1.0.0",
  "description": "single page application",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode production",
    "start": "webpack-dev-server --open --mode development"
  },
  "keywords": [
    "javascript",
    "viri"
  ],
  "author": "vidibell",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "babel-loader": "^8.1.0",
    "html-webpack-plugin": "^4.2.0",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "dependencies": {
    "production": "0.0.2"
  }
}
</code>

veo que tengo un archivo que se llama package-lock.json eso tiene algo que ver? 😦

La configuracion de webpack actualizada

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js',
    },
    resolve: {
        extensions: ['.js'],
    },
    module: {
        rules: [
        {
            test: /\.js?/,
            exclude: /node_modules/,
            use: {
            loader: 'babel-loader',
            },
        },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
        inject: true,
        template: './public/index.html',
        filename: './index.html',
        }),
    ],
};

Marzo de 2023,

Estoy realizando este curso con Webpack 5 y dependencias en las versiones vigentes.

para que me funcionara el script: “npm run build”, hace falta instalar la dependencia: “lodash”

npm install --save lodash

de acuerdo a la documentación oficial que encuentran en: https://webpack.js.org/guides/getting-started/#basic-setup

luego en el archivo del proyecto que se ubica en src/index.js
debe importar la dependencia ante del console.log

import _ from ‘lodash’;
console.log(‘Hola’);

como resultado, compila el js y genera el archivo con la licencia. en la carpeta ‘dist’

Si estan usando webpack 5 y no les genera correctamente el codigo en el main agreguen mode: ‘development’ en el module.exports

module.exports = { 
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js' 
    },```

No logro hacer que me genere todo ése código en el main.js

Les recomiendo instalar las mismas versiones del profesor, para evitar problemas de compatibilidad:
.
npm install -D -E @babel/[email protected]
npm install -D -E [email protected]
npm install -D -E [email protected]
npm install -D -E [email protected]
npm install -D -E [email protected]
npm install -D -E [email protected]

A mi no me funcionan la verdad, tenia que instalar mas dependencias para que no me diera error, os dejo mi packge.json

 "devDependencies": {
    "@babel/core": "^7.17.9",
    "@babel/plugin-transform-runtime": "^7.17.0",
    "@babel/preset-env": "^7.16.11",
    "babel-loader": "^8.2.4",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.8.1"
  }

Con esto instalado todo funcionó correctamente. Espero que os sirva.

casi después de 1 hora resolviendo errores de ortografía Dios ajjajaja

Cuando escribimos en el template, suele ser molesto el hecho de tener que escribir dos veces las etiquetas html, la de inicio y la de cierre. Para escribir esto solo una vez, lo que hay que hacer es primero escribir las dos llaves <></> y después solo escribir en la llave de cierre, así la llave de inicio se escribe al mismo tiempo

En mi script del package.json puse de la siguiente manera:

"start": "webpack serve --open --mode development"

Y en mi configuración de Webpack agregue lo siguiente:

module.exports = {
  //...
  devServer: {
    open: true,
  },
};

Ahora cada vez que se ejecute el script, este se abrirá en mi navegador por default.

Muchachos, si el error del NPM RUN BUILD persiste luego de bajar las versiones de webpack y webpack-cli… También deben bajar la versión del html-webpack-plugin !
npm uninstall html-webpack-plugin
npm i html-webpack-plugin@4
Espero les sirva… yo había intentado todo y esto lo solucionó!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cientifico</title>
</head>
<body>
    <main class="Main">
        <header class="Header" id="Header">
            <section id="Content">
                <div class="loading"></div>
            </section>

        </header>
    </main>
</body>
</html>```

Instalar estas versiones para evitar problemas: npm i webpack@4 webpack-cli@3

crea el js, pero no me crea el index.html en dist

Yo veo que el Profe siempre pone
{

}; el punto y coma acá pero en un curso de Freddy creo que el programación básica el dice que ahí no es necesario ponerlo, es solo una costumbre del profe o si hay que ponerlo ahora por buena practica o algo asi?

{
  "name": "cientifico",
  "version": "1.0.0",
  "description": "single page application",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode production",
    "start": "webpack-dev-server --open --mode development"
  },
  "keywords": [
    "single page application",
    "javascript"
  ],
  "author": "Fernando Cordero",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "babel-loader": "^8.1.0",
    "html-webpack-plugin": "^4.0.4",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

La carpeta dist crea el main.js pero no me crea el index.html
Alguien sabe por que?

Ademas de cambiar modo por mode, creo que uno de los principales errores es la ruta donde creamos los archivos, verifiquen que sea la correcta!

me dice esto no entiendo que hice mal, lo envio haci porque no se como enviar el screenshot por aqui

WARNING in configuration
The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaultsfor each environment.
You can also set it to ‘none’ to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
Child html-webpack-plugin for “index.html”:
1 asset
Entrypoint undefined = index.html
4 modules

Bueno, probando muchas soluciones y versiones de webpack para continuar con la clase mi solucion fue borrar todo webpack y seguir la clase sin usarlo.

Corrió todo bien hasta la ejecución del comando ‘npm run build’ en la terminal, pues no me creó la carpeta ‘dist’, y tampoco los archivos index.html ni main.js (básicamente no transpiló) ¿qué puedo hacer?

si tienen problemas con un error verifiquen sobre webpack html, aqui el enlace : https://www.npmjs.com/package/html-webpack-plugin

y aqui el codigo:

<code> 
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin()
  ]
}

si ya tienen su html , entonces ejecuten npx webpack y listo les saldra el html, en mi caso funciono , tenia muchos errores …

sigo viendo el curso aunque esta desactualizado! esta muy bueno hasta ahora!

También puede poner ! y tab y sale un html bonito

Como otro atajo para crear la estructura basica de html se puede con:

! y luego tab

Si alguien como yo tuvo el error de que en el index.js solo salía el console.log pueden intentar remover las dependencias e instalar la versión exacta con la que trabaja el profe

"devDependencies": {
    "@babel/core": "^7.7.5",
    "babel-loader": "^8.0.6",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  }

https://platzi.com/clases/1787-spa-javascript/25884-crear-el-home/?time=471

Un tip:

Al momento de crear el template dentro del archivo JS recomiendo en VSCODE presionar las teclas Ctrl+K M (CMD+K M en Mac) y cambiar el modo a HTML, con esto tendras todas la bondades del editor al escribir la plantilla de HTML, o bien lo puedes cambiar de manera manual seleccionando el lenguage de Javascript a HTML en la parte inferior derecha.

Al momento de terminar la edicion de la plantilla solo hace falta cambiar el modo de nuevo a Javascript y listo!

muy buena clase

Otro shortcut para crear la estructura base de html es presionar ! y luego tab

Una manera mas sencilla de poner el contenido base en todos los archivos con extensión html es solo poniendo ! y un tab, y así se pone todo lo que se pondría con un html:5

Aquí todo lo que debería contener un archivo .gitignore

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# TypeScript v1 declaration files
typings/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env
.env.test

# parcel-bundler cache (https://parceljs.org/)
.cache

# Next.js build output
.next

# Nuxt.js build / generate output
.nuxt
dist

# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and *not* Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public

# vuepress build output
.vuepress/dist

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# TernJS port file
.tern-port

Nueva forma de escribir el plugin de html:

  plugins: [
    new HtmlWebpackPlugin({
        inject: true,
        template: './public/index.html',
        filename: './index.html'
    })
  ]

Estructura emmet, copian en vscode y luego tab:

main.Main>header.Header#header>section#content>div.loading

const home=() => {
    const view=`
    <div class="Characters">
        <article class="Character-item">
            <a href="#/1/">
            <img src="image" alt="name">
            <h2>Name</h2>
            </a>
        </article>
    </div>
    `
}

Nunca les habia tomado tanta importancia a las ArrowFunctions hasta ahora , es el curso perfecto para implementar js en el mundo real o proyectos

Me pregunto si sera posible en lugar de escribir el template en comillas francesas, importar el template desde un html, de esta manera evitariamos problemas de sintaxis y el IDE ayudaria con la labor de escritura.

PARA LOS QUE NO LES CREA EL INDEX.HTML EN LA CARPETA DIST

MUEVAN WEBPACK.CONFIG.JS A LA RAÍZ DEL PROYECTO Y VUELVAN A CORRER LA BUILD

dale like para que más gente lo vea, es un error común pero mal documentado en los comentarios 😃

Tenia el error de que me generaba el main.js pero no el index.html y el error es que en la configuración de webpack puse module.export en lugar de moduler.exports
Esa ‘s’ fué mi error xD

También podemos ocupar el shortcut ! + Tab para crear la misma estructura de HTML, es un poco más corto 😀

En vez de crear una constante llamada view y luego retornarla, ¿se hubiera podido retornar directamente el código entre comillas francesas?

Estaria muy loco haceer todo esto con web-components los cuales son propios de JS

como puedo hacer screenshot al codigo y enviarlo ?

¿Alguien puede ayudarme? Me sale este error al momento de escribir el comando “npm run build”

OJO, La linea correcta es:
“build”: “webpack --mode production”,

en el video tiene un error por que dice “–modo”, es con E=mode

vamos, se va poniendo interesante el curso!

PD: en el archivo de package.json donde se escriben los scripts es --mode no --modo ;D

• Crear .gitignore para que ignore los node_modules
• Crea los scrips en package.json de produccion y development
• Crea el archivo template de html y crea su contenido con html:5, ademas de agregar algunas secciones y el tag de js vinculado al main.js compilado
• Corre el script npm run build para obtener la carpeta dist con el codigo compilado
• Crea el componente de home

Mi VScode añadio automaticamente el gitignore. Curioso.

Me aparece este error cuando ejecuto el comando “npm run build”

Al intentar correr el comando npm run build me aparece que los m+odulos están obsoletos y nunca me aparece el archivo dist

mensaje en terminal:

C:\xampp\htdocs\100tifi.co>npm run build

> 100tifi.co@1.0.0 build C:\xampp\htdocs\100tifi.co
> npm install webpack --mode production

npm WARN deprecated request@2.12.0: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated CSSselect@0.7.0: the module is now available as 'css-select'
npm WARN deprecated CSSwhat@0.4.7: the module is now available as 'css-what'
npm WARN 100tifi.co@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ production@0.0.2
+ webpack@4.42.1
updated 2 packages and audited 9351 packages in 15.467s

23 packages are looking for funding
  run `npm fund` for details

found 3 moderate severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

package.json:

{
  "name": "100tifi.co",
  "version": "1.0.0",
  "description": "Single Page Application",
  "main": "index.js",
  "scripts": {
    "build": "npm install webpack --modo production",
    "start": "webpack-dev-server --open --mode development"
  },
  "keywords": [
    "javascript"
  ],
  "author": "Juan Daniel Martinez <[email protected]>",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "babel-loader": "^8.1.0",
    "html-webpack-plugin": "^4.2.0",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "dependencies": {
    "production": "0.0.2"
  }
}

webpack.config.js:

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, './src/index.js'),
        filename: 'main.js'
    },
    resolve: {
        extensions: ['.js']
    },
    module: {
        rules: [{
            test: /\.js?$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader'
            }
        }]
    },
    plugins: [
        new HtmlWebPackPlugin([
            {
                inject: true,
                template: './public/index.html',
                filename: './index.html',
            }
        ])
    ]
}

Hola compañeros, tengo este error al compilar el build con npm:

> cientifico@1.0.0 build /home/crodfranco/Documents/cientifico
> webpack --mode production

sh: 1: webpack: not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! cientifico@1.0.0 build: `webpack --mode production`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the cientifico@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Este es el debugger:

info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'build' ]
2 info using npm@6.14.4
3 info using node@v12.16.2
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle cientifico@1.0.0~prebuild: cientifico@1.0.0
6 info lifecycle cientifico@1.0.0~build: cientifico@1.0.0
7 verbose lifecycle cientifico@1.0.0~build: unsafe-perm in lifecycle true
8 verbose lifecycle cientifico@1.0.0~build: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/crodfranco/Documents/cientifico/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
9 verbose lifecycle cientifico@1.0.0~build: CWD: /home/crodfranco/Documents/cientifico
10 silly lifecycle cientifico@1.0.0~build: Args: [ '-c', 'webpack --mode production' ]
11 info lifecycle cientifico@1.0.0~build: Failed to exec build script
12 verbose stack Error: cientifico@1.0.0 build: `webpack --mode production`
12 verbose stack spawn ENOENT
12 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:48:18)
12 verbose stack     at ChildProcess.emit (events.js:310:20)
12 verbose stack     at maybeClose (internal/child_process.js:1021:16)
12 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
13 verbose pkgid cientifico@1.0.0
14 verbose cwd /home/crodfranco/Documents/cientifico
15 verbose Linux 5.3.0-46-generic
16 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
17 verbose node v12.16.2
18 verbose npm  v6.14.4
19 error code ELIFECYCLE
20 error syscall spawn
21 error file sh
22 error errno ENOENT
23 error cientifico@1.0.0 build: `webpack --mode production`
23 error spawn ENOENT
24 error Failed at the cientifico@1.0.0 build script.
24 error This is probably not a problem with npm. There is likely additional logging output above.
25 verbose exit [ 1, true ]

Wooooow

En que parte deben estar ubicadas el package-lock.jason y el package json, deben estar en la carpeta src o en la raiz ?

Hay un error en “modo” por mode. Si no les crea index.html en dist, revisen que webpack.config.js esté en la raíz del proyecto y lo corren de nuevo, en caso de que no.

Para comprender al 100% todo el curso. Me vi en la necesidad de tomar otros de la ruta conjuntamente con otros básicos de javascript. Y estoy aquí, de nuevo repasando este ya con una mejor comprensión.

Me sale el siguiente error en la consola al darle npm run build, a que se puede deber?

ReferenceError: html is not defined
    at Object.<anonymous> (C:\cientifico\webpack.config.js:2:36)
    at Module._compile (C:\cientifico\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
    at Module.load (internal/modules/cjs/loader.js:996:32)
    at Function.Module._load (internal/modules/cjs/loader.js:896:14)
    at Module.require (internal/modules/cjs/loader.js:1036:19)
    at require (C:\cientifico\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at WEBPACK_OPTIONS (C:\cientifico\node_modules\webpack-cli\bin\utils\convert-argv.js:114:13)
    at requireConfig (C:\cientifico\node_modules\webpack-cli\bin\utils\convert-argv.js:116:6)
    at C:\cientifico\node_modules\webpack-cli\bin\utils\convert-argv.js:123:17
    at Array.forEach (<anonymous>)
    at module.exports (C:\cientifico\node_modules\webpack-cli\bin\utils\convert-argv.js:121:15)
    at C:\cientifico\node_modules\webpack-cli\bin\cli.js:71:45
    at Object.parse (C:\cientifico\node_modules\yargs\yargs.js:567:18)
    at C:\cientifico\node_modules\webpack-cli\bin\cli.js:49:8
    at Object.<anonymous> (C:\cientifico\node_modules\webpack-cli\bin\cli.js:366:3)
    at Module._compile (internal/modules/cjs/loader.js:1147:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
    at Module.load (internal/modules/cjs/loader.js:996:32)
    at Function.Module._load (internal/modules/cjs/loader.js:896:14)
    at Module.require (internal/modules/cjs/loader.js:1036:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (C:\cientifico\node_modules\webpack\bin\webpack.js:156:2)
    at Module._compile (internal/modules/cjs/loader.js:1147:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
    at Module.load (internal/modules/cjs/loader.js:996:32)
    at Function.Module._load (internal/modules/cjs/loader.js:896:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47
npm ERR! code ELIFECYCLE```

A seguir!

Me encanta tu diseño para codificar.
¿Alguien sabe cuál es?

por que me sale ese error

Hola a alguien le sale el error cuando corren npm run build?
Llevo su buen rato intentando de resolverlo y hasta ahora no puedo.

comparto el codigo de
carpeta: pages
archivo: home.js

const Home = () => {
    const view = `
        <div class="Characters">
            <article class="Characters-item">
                <a href="#/1/">
                    <img src"image" alt="name">
                    <h2>Name</h2>
                </a>
            </article>
        </div>
    `;
    return view;
}

export default Home; //permite identificar si puede ser usando dentro de otros archivos de JS

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cientifico</title>
</head>

<body>
    <main class="Main">
        <header class="Header" id="header">
        </header>
        <section id="content">
            <div class="loading"></div>
        </section>
    </main>
</body>

</html>```