Webpack y agrupación de Módulos

Juan Enrique Rodriguez Garcia

student•

module.exports = {
    mode: 'production',
    entry: './src/main.ts',
    devtool: 'incline-source-map',
    resolve: {
        extensions: ['.ts', '.js'],
    },
    output: {
        filename: 'bundle.js',
    }
}```

Jose Daniel Barría Reyes

student•

buenisimo!

Miguel Ángel Jancko Gutiérrez

student•

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.

Raul Hernández

student•

Les dejo la cheatsheet de npm para que sea más entendible la clase :)

José Antonio Torres

student•

Tienes un link? no se aprecia bien :(

Jimmy Buriticá Londoño

student•

Lo descargue a mi PC y se ve perfecto. Gracias.

Omar Fernando López Olivas

student•

npm install ts-loader --save-dev

Jose Daniel Barría Reyes

student•

tremendo!

Luis Abdel Rangel Castro

student•

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'
  }
};

Derick Robinson

student•

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

Edgar Andrés Angrino Lafaux

student•

Revisa bien el webpack.config.js devtool: "inline-source-map",

Omar Fernando López Olivas

student•

npm install typescript webpack webpack-cli --save-dev

Alejandro Andrade Soriano

student•

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"
  }
}

yerson lasso

student•

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/

Miguel Ángel Jancko Gutiérrez

student•

Muchas gracias, me funcionó revisarlo y aplicarlo.

Martín S. Campos

student•

Para quienes no saben de expresiones regulares

// son los delimitadores de la expresión.
\ se utiliza para escapar algún carácter especial, en este caso el punto.
$ hace referencia al final de la coincidencia. Con esto tomando todos los archivos con extensión ts.

Luis Alejandro Vera Hernandez

student•

Gracias por esa mini explicacion de esas expresiones regulares

Martín S. Campos

student•

Te recomiendo el curso de Expresiones regulares, esta muy bien explicado y hay buenas practicas.

Alexis Sebastian Ramos Caballero

student•

Excelente curso, muy facil de comprender las explicaciones del profesor.

Jose Alejandro Marin Lopez

student•

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>```

Moisés Manuel Morín Hevia

student•

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.

Andrés Felipe Eslava Zuluaga

student•

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...
  };

Juan David Merchán Torres

student•

Hola 👋

Pregunta 🤔 Para que necesitamos webpack para hacer un build si el tsc ya te hace el build?

tsc build -p

Héctor Eduardo López Carballo

student•

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.

Derick Robinson

student•

Hola, me pueden decir que version de webpack esta usando el profesor Luis en este video? Gracias!

Héctor Eduardo López Carballo

student•

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"

Juan David González Rodríguez

student•

puedes usar

npm i -D webpack@4 webpack-cli@3

Julio Loarte Huerto

student•

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'
    }
}

Alejandro Andrade Soriano

student•

Observación en la documentación de webpack el archivo de configuración lo manejan con el nombre de

webpack.config.js

Nikolas Santis

student•

No sé porque mi verbose no me sale en colores y antes sí xd :P

Boris Vargas Paucara

student•

npm init -y

Yesid Ernesto Perdomo

student•

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

Damian Stone

student•

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 ;)

Mateo Rojas Giraldo

student•

module.exports = {
    mode: 'production',
    entry: './src/main.ts',
    devtool: 'inline-source-map',
    resolve: {
        extensions: ['.ts', '.js'],
    },
    output: {
        filename: 'bundle.js',
    }
};

module.exports = {
    mode: 'production',
    entry: './src/main.ts',
    devtool: 'incline-source-map',
    resolve: {
        extensions: ['.ts', '.js'],
    },
    output: {
        filename: 'bundle.js',
    }
}```

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'
  }
};

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$".

{
  "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"
  }
}

[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.

<!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>```

{
  "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"
  }
}

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...
  };

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'
    }
}

module.exports = {
    mode: 'production',
    entry: './src/main.ts',
    devtool: 'inline-source-map',
    resolve: {
        extensions: ['.ts', '.js'],
    },
    output: {
        filename: 'bundle.js',
    }
};

Webpack y agrupación de Módulos

Introducción a TypeScript

El lenguaje de programación TypeScript

Instalación de herramientas para TypeScript

Instalación de herramientas en Windows

Navegación y refactorización

Entorno de Desarrollo

El compilador de TypeScript

El archivo de configuración de TypeScript

Mi primer proyecto TypeScript

Tipos en TypeScript

Tipado en TypeScript

Number, Boolean y String

Any

Void y never

null y undefined

Object

Array

Tupla

Enum

Unión de Tipos, Alias y Tipos Literales

Aserciones de tipo

Funciones en TypeScript

Resumen

Tipos Personalizados

Interfaces

Interfaces: propiedades opcionales

Extensión de interfaces

Clases

Clases públicas y privadas

Métodos Get y Set

Herencia de clases y propiedades estáticas

Resumen

Módulos

Principios de responsabilidad única

Resolviendo módulos

Webpack y agrupación de Módulos

Cierre

Cierre