Привет! Сегодня я расскажу вам о Webpack 4 с разделением кода на отдельные модули, а также о интересных решениях, которые помогут вам быстрее собрать сборку на webpack 4. В конце, я предоставлю свою базовую сборку на webpack c самыми необходимыми инструментами, которую вы в последствие сможете расширить. Данная сборка вам поможет понять данный материал, а также возможно поможет быстрее написать свою реализацию и быстрее решить возможные проблемы.Читать полностью »
Рубрика «webpack»
Webpack 4 и разделение конфигурационного файла на модули
2018-10-21 в 16:25, admin, рубрики: javascript, webpack, webpack 4, системы сборкиCogear.JS – современный генератор статических сайтов
2018-10-13 в 8:56, admin, рубрики: node.js, open source, static site, webpackПривет!
Хочу представить вниманию генератор статических сайтов с открытым исходным кодом, написанный на Node.JS, в основе которого лежит Webpack.
Проект вдохновлён тем же Jekyll, но в основе своей использует современный технологический стек. Например, предоставляет возможность «горячей подгрузки» (без перезагрузки страницы) изменённых скриптов и стилей.
Боилерплейт ASP.NET Core 2 с React, Redux и плюшками
2018-10-12 в 7:57, admin, рубрики: .net, asp.net core, node.js, ReactJS, redux, server-side javascript, ssr, TypeScript, webpack
Настал, наконец, тот момент, когда я могу представить вам боилерплейт React Core Boilerplate (GitHub, Visual Studio Marketplace), или, иными словами, готовый шаблон проекта на ASP.NET Core.
Интересно? Добро пожаловать под кат.
4 совета для оптимизации webpack-приложения
2018-10-03 в 12:24, admin, рубрики: fast-async, gsap, javascript, null-loader, webpack, webpack 4, Клиентская оптимизация, оптимизация сайта, Разработка веб-сайтовВсем привет!
За время моей работы с вебпаком у меня накопилась пара интересных советов, которые помогут вам приготовить отлично оптимизированное приложение. Приступим!
Поиск правильного способа разделения материалов сайтов с помощью Webpack
2018-09-17 в 9:00, admin, рубрики: javascript, webpack, Блог компании RUVDS.com, разработка, Разработка веб-сайтовПоиск наилучшего способа организации материалов веб-проектов может оказаться непростой задачей. Существует множество различных сценариев работы пользователей с проектами, множество технологий и других факторов, которые нужно принимать во внимание.
Автор материала, перевод которого мы сегодня публикуем, говорит, что хочет рассказать здесь обо всём, что нужно знать для грамотной подготовки материалов веб-проектов к работе. Во-первых, речь пойдёт о том, как подобрать такую стратегию разделения файлов сайта, которая наилучшим образом подойдёт для конкретного проекта и для его пользователей. Во-вторых — будут рассмотрены средства реализации выбранной стратегии.
Быстрый старт веб-проекта (BE — Java Spring, FE — React Redux, взаимодействие — Rest, WebSocket)
2018-09-11 в 14:43, admin, рубрики: BE, Bootstrap, FE, java, javascript, package.json, React, ReactJS, redux, rest, spring, webpack, WebSocket, Взаимодействие фронта и бека
Чтобы разработать современное веб приложение, необходимо иметь навыки как в создании серверной части, так и клиентской. Наиболее часто встречаемое в последнее время сочетание в корпоративной среде — это Java c использованием Spring Framework для сервера и React для клиента. Однако не все разработчики обладают Full stack навыками (знаниями как в серверной так и в клиентской части), а для начинающих разработчиков создание такой конфигурации оказывается совсем непосильной задачей.
Итак, вот готовое решение, которое позволит научиться создавать подобные конфигурации, а также экономить время при старте нового проекта.
Читать полностью »
Бег на месте и веб-разработка
2018-08-16 в 11:28, admin, рубрики: css, javascript, React, TypeScript, vanillajs, webcomponents, webpack, Здоровье гика, Разработка веб-сайтовВсем привет!
Сейчас я расскажу вам одну странную историю. Однажды, я жил в кондоминимуме, в котором, на первом этаже, был зал для фитнеса с беговыми дорожками. В юности, я активно занимался спортом и тогда мне удалось познать состояние, которое возникает во время бега и называется «второе дыхание»: это когда вдруг начинаешь чувствовать себя окрыленным божеством, не знающим усталости. Дыхание, сердцебиение и движения тела входят в какой-то особый резонанс, и превращают тебя в бегущую машину. Ощущение тем ярче, на мой взгляд, чем больше вы НЕ любили бегать до этого момента. Так вот, я каждый день ходил мимо беговых дорожек и думал, что хорошо бы вспомнить молодость. Ну и вспомнил. Беговая дорожка отлично в этом помогла, она позволяла тонко настроить темп и достичь нужного ритма. На улице у меня так не получается: бежать с ровной скоростью по городу — очень трудно, мешают рельеф и препятствия. Через какое-то время я переехал в обычную квартиру (без фитнес-зала), и стал задумываться о приобретении собственной беговой дорожки.
Читать полностью »
Открытый вебинар «Cоздание приложения на Webpack + React + Express»
2018-07-31 в 21:40, admin, рубрики: express.js, javascript, node.js, react.js, webpack, Блог компании Отус, ПрограммированиеВсем привет!
В июле 2018 года наш преподаватель курса «Разработчик JavaScript» Юрий Дворжецкий провел открытый вебинар на тему «Cоздание приложения на Webpack+React+Express», правда, в рамках второго курса, где он выступает как преподавателя одного из модулей, посвящённого JavaScript. В этом материале вы сможете ознакомиться с видеозаписью и кратким пересказом прошедшего мастер-класса.
Работа на открытом уроке проходила по следующему плану:
- Знакомство с Node JS и Express JS.
- Знакомство с Webpack.
- Знакомство с React.
Итак, поехали!
Angular: ngx-translate. Улучшаем инфраструктуру c помощью Webpack
2018-06-10 в 13:10, admin, рубрики: angular, front-end, front-end разработка, FrontEnd Development, i18n, java, loader, ngx-translate, plugin, TypeScript, webpack, Программирование, Разработка веб-сайтовДоброго времени суток.
Пришло время ngx-translate лайфхаков. Изначально я планировал 3 части, но т.к вторая часть на деле мало информативна — в этой постараюсь максимально кратко изложить 2е части.
Рассмотрим AppTranslateLoader в замену TranslateHttpLoader. Наш AppTranslateLoader будет в первую очередь обращать внимание на язык браузера и содержать fallback логику, импортировать локализации MomentJs, и производить загрузку через APP_INITIALIZER. Так же в результате объединения 2ух частей лайфхаков, по ходу мы углубимся в создание удобной и гибкой инфраструктуры локализаций в проекте.
Основной целью является не AppTranslateLoader (т.к он достаточно простой и не сделать его сложно), а создание инфраструктуры.
Я пытался писать максимально доступно, но т.к в статье достаточно много чего можно расписать подробнее — это займет много вермени и будет не интересно тем, кто уже умеет). Потому статья вышла сильно не дружелюбной к новичкам. С другой стороны в конце есть ссылка на expample продж.
Angular cli 6: зачем нужен и как использовать
2018-06-07 в 14:27, admin, рубрики: angular, Angular 6, javascript, node.js, TypeScript, webpack, Блог компании Netcracker
Всем привет!
Версия Angular 2.0.0 вышла в сентябре 2016 г. И сразу же появилось большое количество подходов к построению и сборке приложений на этом фреймворке. На просторах интернета можно найти Angular seed на любой вкус.
Мы тоже создали свой Angular seed: создали общий project-template, обязали все команды, разрабатывающие фронт-энд, использовать одну структуру приложений.
А уже через полгода, в марте 2017 года, увидела свет версия Angular cli (cli – command-line interface) 1.0.0. Идея, взятая за основу, просто отличная: систематизировать подход к разработке приложений на Angular 2+. Стандартизовать структуру приложения, создание сущностей внутри приложения, а также автоматизировать сборку приложения. Эти задачи и позволяет решить Angular cli, значительно экономя ваше время.
В статье я покажу, как перейти на Angular cli 6
Читать полностью »