Configuración de Webpack para Aplicaciones React con TypeScript

Para crear una aplicación React utilizando TypeScript y Webpack, siga estos pasos:

1. Inicialización del Proyecto

Cree un nuevo directorio para su proyecto y navegue hasta él:

mkdir webpack-react-ts
cd webpack-react-ts

Inicialice el archivo package.json con Yarn:

yarn init -y

El contenido inicial de package.json será similar al siguiente:

{
  "name": "webpack-react-ts",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

2. Instalación de Dependencias

Añada las siguientes dependencias en su archivo package.json:

"dependencies": {
  "react": "^16.12.0",
  "react-dom": "^16.12.0"
},
"devDependencies": {
  "@babel/core": "^7.7.7",
  "@babel/preset-env": "^7.7.7",
  "@babel/preset-react": "^7.7.4",
  "@babel/preset-typescript": "^7.7.7",
  "@types/node": "^12.12.5",
  "@types/react": "^16.9.11",
  "@types/react-dom": "^16.9.3",
  "babel-loader": "^8.0.6",
  "cross-env": "^6.0.3",
  "html-webpack-plugin": "^3.2.0",
  "serve": "^11.3.0",
  "terser-webpack-plugin": "^2.3.2",
  "typescript": "^3.7.4",
  "webpack": "^4.41.5",
  "webpack-cli": "^3.3.10",
  "webpack-dev-server": "^3.10.1"
}

Ejecute el siguiente comando para instalar las dependencias:

yarn install

3. Configuración de Scripts

Añada los siguientes scripts en su archivo package.json:

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server",
  "build": "cross-env NODE_ENV=production webpack",
  "start": "serve dist"
}

4. Configuración de Babel

Cree un archivo .babelrc con la siguiente configuración:

{
  "presets": ["@babel/env", "@babel/react", "@babel/typescript"]
}

5. Configuración de TypeScript

Ejecute el siguiente comando para generar un archivo tsconfig.json básico:

tsc --init

Luego, modifique el archivo tsconfig.json para incluir las siguientes opciones:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "jsx": "react",
    "moduleResolution": "node",
    "strict": true,
    "noEmit": true,
    "allowJs": true,
    "skipLibCheck": true,
    "isolatedModules": true,
    "esModuleInterop": true
  },
  "include": ["src"]
}

6. Configuración de Webpack

Cree un archivo webpack.config.js con la siguiente configuración:

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserWebpackPlugin = require('terser-webpack-plugin');

const esProduccion = process.env.NODE_ENV === 'production';

const configuracion = {
  mode: esProduccion ? 'production' : 'development',
  entry: {
    principal: './src/entrada.tsx',
  },
  output: {
    path: resolve(__dirname, 'dist'),
    filename: 'paquete.js',
  },
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      inject: 'body',
    }),
  ],
};

if (esProduccion) {
  configuracion.optimization = {
    minimizer: [new TerserWebpackPlugin()],
  };
} else {
  configuracion.devServer = {
    puerto: 9000,
    abrir: true,
    caliente: true,
    comprimir: true,
    estadisticas: 'errores-solo',
    superposición: true,
  };
}

module.exports = configuracion;

7. Creación de Archivos React

Cree los siguientes archivos dentro de un directorio src:

index.html


<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Webpack con React y TypeScript</title>
  </head>
  <body></body>
</html>

entrada.tsx

import React from 'react';
import { render } from 'react-dom';
import ComponentePrincipal from './ComponentePrincipal';

render(<ComponentePrincipal />, document.body);

ComponentePrincipal.tsx

import React from 'react';

const ComponentePrincipal: React.FC = () => {
  return <div>¡Webpack es genial!</div>;
};

export default ComponentePrincipal;

8. Ejecución de la Aplicación

Puede iniciar el servidor de desarrollo, constriur la aplicación o iniciar el servicio de producción con los siguientes comandos:

yarn dev: Inicia el servidor de desarrollo.
yarn build: Construye la aplicación.
yarn start: Inicia el servicio de producción.

Etiquetas: webpack React TypeScript babel html-webpack-plugin

Publicado el 9-5 06:11

Friki Work