- HTMLWebpackPlugin Мы назвали бандл "bundle.[hash].js" и поместили его в dist. HtmlWebpackPlugin создаст новый файл index.html в директории dist и добавит в него ссылку на бандл — <script src="bundle.[hash].js"></script>. Здорово, правда? Поскольку index.html генерируется HtmlWebpackPlugin, даже если мы изменим точку выхода или название бандла, HtmlWebpackPlugin получит эту информацию и изменить содержимое index.html. <============================================>
- Copy-webpack-plugin С помощью этого плагина мы будем копировать наши изображения и статичные файлы из src в dist. Чтобы в последующем мы могли к ним обращаться. <============================================>
- Mini-css-extract-plugin Этот плагин извлекает CSS в отдельный файл. Он создает CSS-файл для каждого JS-файла, который содержит CSS. Он поддерживает загрузку CSS и SourceMaps по требованию. Т.е. когда в js файле он видит import "./***.css(scss)", он в dist создаст css-файл с хешем, в который положит все стили, лежащие во всех css(scss)файлах. P.s возможно с .module. ситуация другая <============================================>
- Loaders в Webpack Они же лоадеры, или загрузчики — дополнительные сущности, которые расширяют возможности Webpack по преобразованию. По умолчанию сборщик распознает только файлы JS и JSON. С помощью лоадеров можно «научить» его понимать (превращает их в JS) и другие файлы, от таблиц стилей CSS до изображений
- Loaderы в Webpack используются для выполнения различных задач, таких как: Транспиляция кода: Например, Babel loader позволяет вам использовать современный синтаксис JavaScript и транспилировать его в совместимый код для более старых версий браузеров. Обработка препроцессоров: Например, Sass loader позволяет использовать Sass-файлы и преобразовывает их в обычные CSS-файлы, которые могут быть использованы в вашем проекте. Обработка изображений и других ресурсов: Например, File loader позволяет вам импортировать изображения и другие ресурсы в ваш код и автоматически копировать их в выходную директорию сборки. Статический анализ и преобразование кода: Например, ESLint loader позволяет проверять ваш код на соответствие определенным правилам стиля и стандартам.
- <============================================>
- Babel Babel — это компилятор, который преобразует современный JavaScript для запуска в старых браузерах. Он также может выполнять и другие задачи, такие как преобразование синтаксиса JSX, но это не единственный инструмент для этого. Решение заключается в том, чтобы использовать новейшие возможности и трансформировать их в более старый код, который будет понятен браузеру. // Babel Input: ES2015 arrow function [1, 2, 3].map(n => n + 1); // Babel Output: ES5 equivalent [1, 2, 3].map(function(n) { return n + 1; }); Пресеты:(@babel/preset-env)-предустановка, которая позволяет вам использовать последнюю версию JavaScript без необходимости микроуправления тем, какие преобразования синтаксиса (и, возможно, полифиллы браузера) необходимы вашей целевой среде (средам)
vadim2308 / excel-course Goto Github PK
View Code? Open in Web Editor NEWPure JS Advaced Course
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent