Webpack es un popular paquete de módulos y optimizador. Puede cargar muchos tipos diferentes de código, entender sus dependencias, y crear un paquete que hace referencia a todo de una sola vez.
En el mismo proyecto que creamos desde cero, añadimos un webpack y un cargador especial de módulos de TypeScript: ts-loader.
1npminstall webpack-cli webpack ts-loader --save-dev
bash
En este ejemplo se utilizará el uso sencillo del ts-loader, pero la documentación esboza flujos de trabajo más avanzados que usted podría optar por utilizar.
Empieza creando un nuevo webpack.config.js:
123456789101112131415161718192021222324252627282930313233 "use strict";const path =require("path");module.exports={/// Configurar los mapas de fuentes de depuración para que estén "en línea" para// simplicidad y facilidad de uso devtool: "inline-source-map",// La entrada del punto de entrada de la aplicación:"./src/index. tsx",// Dónde compilar el paquete// Por defecto el directorio de salida es `dist` output:{ nombre de archivo: "bundle.js"},// Módulo de cargadores de archivos soportados:{ reglas:[{ test:/.tsx?$/, loader: "ts-loader"}]},// Extensiones de archivo para soportar la resolución:{ extensiones:[".ts",".tsx",".js"]}};js
Esta es una configuración básica de Webpack que establece nuestro punto de entrada (src/index.tsx) que Webpack usará para construir el árbol de dependencia y leer nuestras declaraciones de importación. La sección de módulos describe diferentes tipos de «módulos» (o archivos) para que el Webpack los analice y los cargue. Por defecto, sólo se soporta JavaScript, pero instalando ts-loader podemos añadir soporte para archivos TypeScript.
Ya que ts-loader se encarga de manejar la mayor parte de nuestra configuración de TypeScript, podemos simplificar el archivo tsconfig.json:
12345678910111213141516171819202122232425{ "compilerOptions": { // Permitir importar como `importar Reaccionar de $0027reaccionar$0027` "allowSyntheticDefaultImports": true, // Usar el sistema de módulos ES2015 "module": "es2015",-- // Resolver los módulos usando el algoritmo de resolución de nodos- "moduleResolution": "nodo", // Establecer Reaccionar como la fábrica JSX "jsx": "reaccionar", // Incluir los caracteres de las declaraciones incorporadas de lib "lib": ["es2015", "dom", "dom.iterable"], // Incluir mapas de fuente del módulo para depurar "sourceMap": true,- - // Salida a un solo archivo concatenado- "outFile": "dist/bundle.js" },- "include": ["src"]}diff
Podemos quitar el outDir, el módulo Resolution, e incluir opciones, ya que ahora las maneja Webpack. La salida seguirá estando en la carpeta dist, ya que es la carpeta por defecto que utiliza Webpack.
Ahora reemplace los scripts npm con equivalentes a los webpack:
12345678{ "scripts": {- "construir": "tsc -p .",- "watch": "tsc -p . -w "+ "construir": "webpack "+ "watch": "webpack -w", },}diff
Una vez que se ejecuta el comando de construcción, un nuevo dist/bundle.js aparecerá después de que Webpack compile la aplicación.
Para poder ver la aplicación, tendremos que crear un archivo HTML para hacer referencia al paquete y renderizar una página.
Añade o modifica el archivo index.html:
1234567891011121314151617<!DOCTYPE html;<html;-head;- -------React and TypeScript</title;+------título;-------Webpack with React and TypeScript</title;-------head;-------cuerpo;-------div -- Dependencias -- -- -- -- script src="https://unpkg.com/[correo electrónico protegido]/umd/react. development.js" type="text/javascript"></script=;- <script src="https://unpkg.com/[email protected]/umd/react-dom.development. js" type="text/javascript"></script ]; <!-- Compiled TypeScript --§; <script src="dist/bundle.js" type="text/javascript"</script ]; </body </html ];
diff
Creamos nuestro elemento raíz que Reactará dentro y añadimos una referencia al paquete compilado que Webpack produce.
Ahora puedes previsualizar la aplicación usando el paquete serve npm:
1npx serve
Navegue hasta la URL que aparece en la terminal para ver el ejemplo basado en Webpack.
Hubo más de un puñado de pasos para configurar TypeScript con React y Webpack desde cero, pero es importante ver lo que se obtiene cuando se usan iniciadores más sofisticados como CRA.
Webpack proporciona una amplia gama de características y ofrece una enorme flexibilidad para definir cómo se compila su proyecto. Sin embargo, como se ha visto anteriormente, no es una experiencia «lista para usar» el configurarlo con TypeScript.