Как запустить и собрать typescript с помощью webpack?

Для запуска и сборки TypeScript с помощью Webpack, вам понадобится выполнить несколько шагов:

Шаг 1: Установка зависимостей
Сначала вам нужно установить необходимые зависимости. Убедитесь, что у вас уже установлен Node.js и npm (пакетный менеджер Node.js). Затем выполните следующую команду в терминале, чтобы создать новый проект:

mkdir my-webpack-typescript-project 
cd my-webpack-typescript-project 
npm init -y 

Затем установите Typescript, Webpack и необходимые загрузчики:

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

Шаг 2: Создание конфигурационных файлов

В корневой папке проекта создайте файл tsconfig.json. В этом файле вы можете настроить параметры для компиляции TypeScript. Введите следующий код:

{
  "compilerOptions": {
    "target": "es5",
    "module": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  }
}

Затем создайте файл webpack.config.js в корневой папке проекта и добавьте следующий код:

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

Шаг 3: Настройте точку входа

Создайте файл src/index.ts и введите простой код TypeScript, например:

class Greeter {
  greeting: string;

  constructor(message: string) {
    this.greeting = message;
  }

  greet() {
    return 'Hello, ' + this.greeting;
  }
}

const greeter = new Greeter('world');
console.log(greeter.greet());

Шаг 4: Запуск и сборка проекта

Теперь можно запустить проект и собрать его с помощью команды npm run build. В файле package.json добавьте следующую секцию "scripts":

"scripts": {
  "build": "webpack"
}

После чего выполните команду:

npm run build

Webpack соберет TypeScript-файлы и создаст файл dist/bundle.js. Это будет скомпилированный и объединенный JavaScript-код вашего проекта.

Шаг 5: Запуск проекта

Вы можете запустить свой проект, открыв файл dist/index.html в браузере.

Это подробная инструкция по запуску и сборке TypeScript с помощью Webpack. Если вам нужны дополнительные настройки или более сложные конфигурации, вы можете ознакомиться с документацией Webpack и TypeScript для получения дополнительных сведений.