Сборка 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:
Ссылки
Подписывайтесь на блог, чтобы не пропустить новые статьи про 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
Предыдущие статьи:
- Мультиязычность ngx-translate в Angular 9 c монорепозиторием Nx.
- Бесконечный скролл в Angular 9 с помощью Intersection Observer API.
- Redux в Angular. Управление состояниями в Angular с помощью Ngrx и Nx.
- Структура и подходы к организации экшенов, селекторов, редьюсеров и эффектов в Ngrx и Nx.
- Тестирование сервисов в Angular с помощью Jest. Тестирование реактивной/асинхронной логики.
- Тестирование Ngrx store в Angular. Методы и подходы для упрощения тестирование stat’ов Ngrx в Nx.