Webpack y agrupación de Módulos
Contenido del curso
Juan Enrique Rodriguez Garcia
Jose Daniel Barría Reyes
Miguel Ángel Jancko Gutiérrez
Raul Hernández
José Antonio Torres
Jimmy Buriticá Londoño
Omar Fernando López Olivas
Jose Daniel Barría Reyes
Luis Abdel Rangel Castro
Derick Robinson
Edgar Andrés Angrino Lafaux
Omar Fernando López Olivas
Alejandro Andrade Soriano
yerson lasso
Miguel Ángel Jancko Gutiérrez
Martin Campos
Luis Alejandro Vera Hernandez
Martin Campos
Alexis Sebastian Ramos Caballero
Jose Alejandro Marin Lopez
Moisés Manuel Morín Hevia
Andrés Felipe Eslava Zuluaga
Juan David Merchán Torres
Héctor Eduardo López Carballo
Derick Robinson
Héctor Eduardo López Carballo
Juan David González Rodríguez
Julio Loarte Huerto
Alejandro Andrade Soriano
Nikolas Santis
Boris Vargas Paucara
Yesid Ernesto Perdomo
Damian Stone
Mateo Rojas Giraldo
module.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', } };
