Сборка Typescript приложения с помощью Webpack

Update 12 января 2021: Обновление webpack’а до 5 версии, а также изменения связанные с Eslint привели к необходимости обновить статью.

В данной статье поговорим о конфигурации webpack для сборки typescript приложения, рассмотрим локальную разработку и сборку приложения для продакшена.

Иногда появляются задачи, по разработке небольшого приложения, где не нужны современные фронтенд фреймворки. И как не был прост React или Vue, задачи обычно сводятся, что нужно сверстать страничку и добавить форму, которая будет отправлять данные на указанный endpoint.

В данном случае, TS/JS кода будет не больше 20 строк кода:

И разворачивать полноценный фреймворк нет смысла. Для данного кода можно отказаться от всех современных благ разработки, если бы не одно но — Необходимо сверстать страничку. А это значит, что нужен CSS препроцессор, нужна автоматическая перезагрузка при изменении кода, а также сборка и оптимизация кода.

И вместо того, чтобы использовать полноценный фреймворк можно сделать простую сборку на webpack.

Основные требования к сборке:

• Typescript — компиляция js
• Livereload — автоматическая перезагрузка
• SCSS — компиляция scss в css
• Html optimize — оптимизация html для prod версии
• Assets — правильные пути к используемым ресурсам (images, fonts, video и т.д)

Создание сборки

Для создания сборки создадим новый node проект:

mkdir webpack-starter
cd webpack-starter

Инициализируем проект:

yarn init

Установка зависимостей

Добавим основные зависимости для webpack:

yarn add -D webpack webpack-cli webpack-dev-server webpack-merge

Добавим Typescript:

yarn add -D typescript @types/node

Так как необходимы лоадеры для typescript, обработки обычных файлов(assets), файлов стилей и html, добавим лоадеры:

yarn add -D style-loader sass-loader node-sass ts-loader file-loader css-loader postcss postcss-loader postcss-import postcss-cssnext cssnano sugarss

Так как папки для dev и prod нужно чистить, добавим необходимые плагины:

yarn add -D clean-webpack-plugin copy-webpack-plugin mini-css-extract-plugin html-webpack-plugin tsconfig-paths-webpack-plugin

И для контроля качества кода, добавим tslint и prettier:

yarn add -D tslint tslint-loader prettier

Добавление конфигураций

Сначала добавим tsconfig:

Tsconfigproduction:

Конфигурация postcss:

Настройка линтеров:

Отметим, что работа с Eslint немного отличается от tslint. Если в Tslint’е можно создать универсальный конфиг, который будет применяться к каждому файлу, то в Eslint такой подход не пройдет. Eslint объединит все правила постарается их применить: правила для html + css + ts. Это все приведет к тому, что парсер будет падать с ошибками. Поэтому, все правила в eslint’е группируются по типам файлов и применяются в соответствии с группами.

Пример конфига для eslint’а:

Настройка webpack

Общая настройка будет следующей:

Как можно увидеть из конфигурации, все достаточно просто. Для настройки dev-server’а:

devServer: {
  contentBase: 'dist',
  compress: true,
  port: 3000
},

Plugin CopyWebpackPlugin копирует нужные asset’ы:

new CopyWebpackPlugin({
  patterns: [
    {
      from: '**/*',
      context: path.resolve(__dirname, 'src', 'assets'),
      to: './assets',
    },
  ],
}),

Плагин HtmlWebpackPlugin использует шаблон для интеграции js и css:

new HtmlWebpackPlugin({
  template: 'src/index.html',
  filename: 'index.html',
  minify: {
    collapseWhitespace: true,
    removeComments: true,
    removeRedundantAttributes: true,
    useShortDoctype: true,
  },
}),

Плагин MiniCssExtractPlugin сохраняет стили в отдельный файл:

new MiniCssExtractPlugin({
  filename: 'style-[hash].css',
}),

Для production сборки, переопределим tsconfig:

Сборка приложения

Для сборки приложения добавим в package.json 3 команды:

"scripts": {
  "serve": "webpack serve --mode=development --progress",
  "build": "webpack",
  "build:prod": "webpack --config webpack.config.prod.js"
}

Запустим dev server:

yarn run serve

Откроем браузер — localhost:3000:

Запустим build:

yarn run build:prod

В результате выполнения команды создались 3 файла:

• index.html
• bundle-[hash].js
• style-[hash].css

В сборке используется hash, чтобы при обновлении файлов на сервере, браузер перезагрузил файлы, а не брал их из кеша.

Резюме

В данной статье рассмотрели простой пример использования webpack для сборки Typescript приложения, а также добавили конфигурацию для dev разработки и сборки production версии.

Спасибо за внимание!

Исходники

Все исходники находятся на github, в репозитории https://github.com/Fafnur/webpack-ts-starter:

Fafnur/webpack-ts-starter

Ссылки

Подписывайтесь на блог, чтобы не пропустить новые статьи про Angular, web разработку и новости из мира фронтенда.

Medium: https://medium.com/fafnur
Добавляйтесь в группу ВК: https://vk.com/fafnur
Добавляйтесь в группу в Fb: https://www.facebook.com/groups/fafnur/
Телеграм канал: https://t.me/f_a_f_n_u_r
Twitter: https://twitter.com/Fafnur1
Instagram: https://www.instagram.com/fafnur

Предыдущие статьи:

1. Мультиязычность ngx-translate в Angular 9 c монорепозиторием Nx.
2. Бесконечный скролл в Angular 9 с помощью Intersection Observer API.
3. Redux в Angular. Управление состояниями в Angular с помощью Ngrx и Nx.
4. Структура и подходы к организации экшенов, селекторов, редьюсеров и эффектов в Ngrx и Nx.
5. Тестирование сервисов в Angular с помощью Jest. Тестирование реактивной/асинхронной логики.
6. Тестирование Ngrx store в Angular. Методы и подходы для упрощения тестирование stat’ов Ngrx в Nx.