Slaidy.com- Webpack
Содержание
- 2. Webpack Webpack — это инструмент, позволяющий скомпилировать, например, JavaScript модули в единый JS-файл. Webpack также известен
- 3. Webpack Он также способен выполнять множество иных операций: помогает собрать воедино ваши ресурсы следит за изменениями
- 4. Webpack может конвертировать встроенные изображения в data:URI позволяет использовать require() для CSS файлов может запустить webpack-dev-server
- 5. Webpack Вам достаточно указать точку входа в ваше приложение (это может быть даже HTML-файл с тегами
- 7. Webpack Вам достаточно указать точку входа в ваше приложение (это может быть даже HTML-файл с тегами
- 8. Установка Webpack npm install -g webpack Сборка проекта: npm init
- 9. Webpack По умолчанию, точкой входа является ./src/index.js. Нижеприведенный пример использует файл ./index.js в качестве входной точки.
- 10. Webpack По умолчанию, вывод размещается в ./dist/main.js. В нижеприведенном примере, результат работы в Webpack генерируется в
- 11. Webpack Чтобы импортировать файлы стилей: import 'style.css' module.exports = { /*...*/ module: { rules: [ {
- 12. Webpack Babel — он используется для транспиляции современного JavaScript в ES5 module.exports = { /*...*/ module:
- 13. Webpack Горячая перезагрузка Для горячей перезагрузки (hot reloading) нужен webpack-dev-server. $ npm install -g webpack-dev-server
- 14. Webpack Плагины — это почти то же самое, что и загрузчики, они могут сделать то, что
- 15. Webpack Плагин HTMLWebpackPlugin автоматически создает HTML-файл с уже подключенным скриптом. module.exports = { /*...*/ plugins: [
- 16. Webpack CleanWebpackPlugin - перед перегенерацией файлов, чтобы очистить нашу папку dist/ и получить файл с конфигурацией.
- 17. Webpack плагины https://webpack.js.org/plugins/
- 18. Webpack Режимы вебпака: режим может быть настроен на development или production (по умолчанию стоит production). module.exports
- 19. Webpack Режим development: менее оптимизирован, чем production работает быстрее не удаляет комментарии предоставляет более подробные сообщения
- 21. Скачать презентацию
Слайд 2Webpack
Webpack — это инструмент, позволяющий скомпилировать, например, JavaScript модули в единый JS-файл.
Webpack
Webpack — это инструмент, позволяющий скомпилировать, например, JavaScript модули в единый JS-файл.
Слайд 3Webpack
Он также способен выполнять множество иных операций:
помогает собрать воедино ваши ресурсы
следит за
Webpack
Он также способен выполнять множество иных операций:
помогает собрать воедино ваши ресурсы
следит за
Слайд 4Webpack
может конвертировать встроенные изображения в data:URI
позволяет использовать require() для CSS файлов
может запустить
Webpack
может конвертировать встроенные изображения в data:URI
позволяет использовать require() для CSS файлов
может запустить
Слайд 5Webpack
Вам достаточно указать точку входа в ваше приложение (это может быть даже
Webpack
Вам достаточно указать точку входа в ваше приложение (это может быть даже
