Contenido del curso
Webpack y agrupación de Módulos
Juan Enrique Rodriguez Garcia
Estudiante
Jose Daniel Barría Reyes
Estudiante
Miguel Ángel Jancko Gutiérrez
Estudiante
Raul Hernández
Estudiante
José Antonio Torres
Estudiante
Jimmy Buriticá Londoño
Estudiante
Omar Fernando López Olivas
EstudianteJose Daniel Barría Reyes
Estudiante
Luis Abdel Rangel Castro
Estudiante
Derick Robinson
Estudiante
Edgar Andrés Angrino Lafaux
EstudianteOmar Fernando López Olivas
Estudiante
Alejandro Andrade Soriano
Estudiante
yerson lasso
EstudianteMiguel Ángel Jancko Gutiérrez
Estudiante
Martin Campos
Estudiante
Luis Alejandro Vera Hernandez
EstudianteMartin Campos
Estudiante
Alexis Sebastian Ramos Caballero
Estudiante
Jose Alejandro Marin Lopez
Estudiante
Moisés Manuel Morín Hevia
Estudiante
Andrés Felipe Eslava Zuluaga
Estudiante
Juan David Merchán Torres
Estudiante
Héctor Eduardo López Carballo
EstudianteDerick Robinson
EstudianteHéctor Eduardo López Carballo
Estudiante
Juan David González Rodríguez
Estudiante
Julio Loarte Huerto
EstudianteAlejandro Andrade Soriano
Estudiante
Nikolas Santis
Estudiante
Boris Vargas Paucara
Estudiante
Yesid Ernesto Perdomo
Estudiante
Damian Stone
EstudianteMateo Rojas Giraldo
Estudiantemodule.exports = { mode: 'production', entry: './src/main.ts', devtool: 'incline-source-map', resolve: { extensions: ['.ts', '.js'], }, output: { filename: 'bundle.js', } }```
buenisimo!
Te equivocaste en la línea:
devtool: 'incline-source-map',
es:
devtool: 'inline-source-map',
por eso el comando: npm run build, no me funcionaba.
Les dejo la cheatsheet de npm para que sea más entendible la clase :)
Tienes un link? no se aprecia bien :(
Lo descargue a mi PC y se ve perfecto. Gracias.
npm install ts-loader --save-dev
tremendo!
module.exports = { mode: 'production', entry: './src/main.ts', devtool: 'inline-source-map', module: { rules: [ { test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/ } ] }, resolve: { extensions: ['.ts', '.js'] }, output: { filename: 'bundle.js' } };
Si les sale un error al ejecutar
npm run build
parecido a este
Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. - configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$".
lo que deben hacer es instalar la misma version de webpack que el profesor, primero eliminamos la version actual
npm remove -D webpack
y luego instalamos la 4.42.0
npm i -D webpack@4.42.0
Revisa bien el webpack.config.js devtool: "inline-source-map",
npm install typescript webpack webpack-cli --save-dev
Una forma mas corta de indicar que se agreguen a la parte de dependencias de Development esos módulos es con el comando.
npm i -D typescript webpack webpack-cli
En mi opinión considero que instalar de manera global el compilador en ocasiones puede derivar en errores de actulizacion, lo que yo recomiendo es siempre instalar el modulo typescript en el entorno de desarrollo.
Asi siempre te aseguras de usar la version de TS mas reciente y actualizada.
Después agregar un script al package.json para correr desde los node_modules el compilador de esta forma.
Example package.js
{ "name": "Curso_Bases_Typescript", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "tsc", "dev": "tsc --watch" }, "keywords": [], "author": "", "license": "ISC", "dependencies": {}, "devDependencies": { "typescript": "^3.9.7", "webpack": "^4.44.1", "webpack-cli": "^3.3.12" } }
En caso que les salga un error como este, se debe a que la estructura que usa el profe ya quedo desactualizada
[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. - configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$". BREAKING CHANGE since webpack 5: The devtool option is more strict. Please strictly follow the order of the keywords in the pattern.
Una versión moderna de esta configuración se puede encontrar en la documentación oficial https://webpack.js.org/guides/typescript/
Muchas gracias, me funcionó revisarlo y aplicarlo.
Para quienes no saben de expresiones regulares
Gracias por esa mini explicacion de esas expresiones regulares
Te recomiendo el curso de Expresiones regulares, esta muy bien explicado y hay buenas practicas.
Excelente curso, muy facil de comprender las explicaciones del profesor.
Para la prueba final del bundle.js
<!DOCTYPE html> <html> <head> <title>Fundamentos de TypeScript</title> <script src="dist/bundle.js"></script> </head> <body> <h2>Fundamentos de TypeScript Platzi</h2> <p>Abre la consola del browser para ver el resultado :-)</p> </body> </html>```
Webpack Es un empaquetador de módulos para aplicaciones web. se añade el package.json con: npm init -y Js super optimizado para la producción.
package.json
{ "name": "photo_app", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "webpack" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "typescript": "^4.1.3", "webpack": "^5.11.0", "webpack-cli": "^4.2.0" }, "dependencies": { "source-map-loader": "^1.1.3", "ts-loader": "^8.0.12" } }
Webpack
module.exports = { mode: 'production', entry: "./src/main.ts", output: { filename: "./dist/bundle.js", }, // Enable sourcemaps for debugging webpack's output. devtool: "source-map", resolve: { // Add '.ts' and '.tsx' as resolvable extensions. extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"], }, module: { rules: [ // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'. { test: /\.tsx?$/, loader: "ts-loader", exclude: /node_modules/ }, // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'. { test: /\.js$/, loader: "source-map-loader" }, ], }, // Other options... };
Hola 👋
Pregunta 🤔 Para que necesitamos webpack para hacer un build si el
tscya te hace el build?
tsc build -p
Hola!
Webpack agrega cosas adicionales como optimización del código y algo que se llama "tree shaking". Si bien tsc convierte el código de TS a JS, webpack hace cosas adicionales después de ello.
Hola, me pueden decir que version de webpack esta usando el profesor Luis en este video? Gracias!
Hola!
En el archivo package.json puedes ver la configuración que tiene su proyecto, ahí viene las versiones de cada dependencia que usa. En el caso de webpack es la versión "webpack": "^4.42.0", "webpack-cli": "^3.3.11"
puedes usar
npm i -D webpack@4 webpack-cli@3
Mi código:
module.exports = { mode: 'production', entry: './src/main.ts', devtool: 'inline-source-map', module: { rules:[ { test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/ } ] }, resolve: { extensions: ['.ts', '.js'], }, output: { filename: 'bundle.js' } }
Observación en la documentación de webpack el archivo de configuración lo manejan con el nombre de
webpack.config.js
No sé porque mi verbose no me sale en colores y antes sí xd :P
npm init -y
Me aparece el siguente error cuando ejecuta la instruccion de instalar webpack
PS C:\Users\Administrador\Desktop\TRABAJO\INNOVACION\FRONTEND\photo-app> npm install typescript webpack-cli --save dev npm ERR! code EBADPLATFORM npm ERR! notsup Unsupported platform for inotify@1.4.6: wanted {"os":"linux","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm ERR! notsup Valid OS: linux npm ERR! notsup Valid Arch: any npm ERR! notsup Actual OS: win32 npm ERR! notsup Actual Arch: x64
npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Administrador\AppData\Roaming\npm-cache_logs\2020-06-01T14_37_49_920Z-debug.log PS C:\Users\Administrador\Desktop\TRABAJO\INNOVACION\FRONTEND\photo-app> npm install typescript webpack-cli --save dev npm ERR! code EBADPLATFORM npm ERR! notsup Unsupported platform for inotify@1.4.6: wanted {"os":"linux","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm ERR! notsup Valid OS: linux npm ERR! notsup Valid Arch: any npm ERR! notsup Actual OS: win32 npm ERR! notsup Actual Arch: x64
npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Administrador\AppData\Roaming\npm-cache_logs\2020-06-01T14_38_18_274Z-debug.log
Tuve un error parecido. No se si estas usando GIT o algo por el estilo pero lo que hice fue hacer un commit de todos los cambios que había hecho últimamente en el proyecto y después me funciono
Espero que hayas podido solucionar ;)
module.exports = { mode: 'production', entry: './src/main.ts', devtool: 'inline-source-map', resolve: { extensions: ['.ts', '.js'], }, output: { filename: 'bundle.js', } };
