Webpack para trabalhar com typescript no front end

Webpack

Instalando o webpack:

npm install -D webpack webpack-cli

Vamos instalar o ts-loader também, pois ele que vai carregar o typescript.

Para instalar o ts-loader:

npm install -D ts-loader

Vou adicionar um outro loader como exemplo, um que carrega imagens, vou usar o file-loader:

npm install -D file-loader

Ele vai servir se quisermos carregar um arquivo de imagem no código como nesse exemplo:

import Icon from './icon.png';

Só precisamos de um arquivo de definição como custom.d.ts no app, para informarmos os tipos de arquivos aceitos, exemplo:

declare module "*.png";

Para ver outros loaders: Webpack - Asset Management

Vamos criar o webpack.config.js com o seguinte código:

const path = require('path');

module.exports = {
  entry: './src/index.ts', // Arquivo inicial do app
  devtool: 'inline-source-map', // Facilita o debug
  module: {
    rules: [
      {
        test: /\.tsx?$/, // Dizendo para ele carregar arquivos com extensões .tsx e .ts
        use: 'ts-loader', // Utilizando o ts-loader
        exclude: /node_modules/,
      },
      {
        test: /\.(png|svg|jpg|gif)$/, // Tipos de imagens que é para ele carregar
        use: 'file-loader', // Utilizando o file-loader
        exclude: /node_modules/,
      }
    ],
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ],
  },
  devServer: {
    contentBase: './dist',
  },
  mode: 'development', // Aqui tem as opções development e production
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'), // Caminho e nome do arquivo de saída
  },
};

Para gerar o bundle.js executamos:

npx webpack --config webpack.config.js

npx webpack

Criaremos também um index.html para importar esse bundle.js na pasta dist

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Getting Started</title>
  </head>
  <body>
    <script src="./bundle.js"></script>
  </body>
</html>

Typescript

Agora vamos instalar o typescript:

npm install -D typescript

Para criar o arquivo de configuração do typescript:

npx tsc --init

Podemos acrescentar o sourceMap no tsconfig.json para facilitar o debug:

"sourceMap": true

webpack-dev-server

O webpack-dev-server facilita o desenvolvimento, ele deixa a aplicação rodando em um server e com reload ativo:

npm install --save-dev webpack-dev-server

O arquivo bundle será disponibilizado na pasta informada no contentBase do devServer no webpack.config.js.

Se quisermos disponibilizar em outro local, temos que especificar no publicPath.

const path = require('path');

module.exports = {
  //...
  devServer: {
    contentBase: path.join(__dirname, 'public'),
    publicPath: '/js/' // Agora ele será disponibilizado em ./public/js/
  }
};

Podemos passar outras opções também.

Exemplo de gzip:

const path = require('path');

module.exports = {
  //...
  devServer: {
    contentBase: path.join(__dirname, 'public'),
    compress: true,
  }
};

Scripts

Os seguintes scripts no package.json podem ajudar:

"scripts": {
    "start": "webpack serve",
    "watch": "webpack --watch",
    "build": "npx webpack"
  },

--open abre a página no navegador assim que o servidor é iniciado.

Arquivos do projeto

Coloquei no Github se quiser ver todos os arquivos: Projeto

Para executar, é só seguir os passos:

npm install

npm start

É preciso ter o Node instalado.