Пару дней назад вышла полностью обновлённая версия svg-sprite-loader — webpack лоадера для создания SVG спрайтов. Внутри я подробно рассскажу о том как он работает и чем облегчает жизнь разработчику.
Рубрика «webpack»
SVG спрайт с webpack одной строкой
2017-05-01 в 20:40, admin, рубрики: javascript, svg, svg-sprite, webpack, webpack 2, Разработка веб-сайтовНативные ECMAScript модули — первый обзор
2017-04-19 в 7:45, admin, рубрики: babel, javascript, webpack, Блог компании Туту.ру, браузеры, будущее, Программирование, Разработка веб-сайтов, стандарты
В этой статье хочу поделиться переводом статьи о нативных ECMAScript модулях, которые все больше и больше обсуждаются среди фронтендеров. Javascript ранее никогда не поддерживал нативно работу с модулями, и нам, фронтендерам, всегда приходилось использовать дополнительные инструменты для работы с модулями. Но вы только представьте, что в скором времени не нужно будет использовать Webpack для создания бандлов модулей. Представьте мир, в котором браузер будет собирать все за вас. Подробнее об этих перспективах я и хочу рассказать.
Читать полностью »
Готовим плацдарм для react-приложения
2017-03-17 в 13:46, admin, рубрики: ES6, javascript, mobx, React, ReactJS, webpack
Я хочу рассказать о процессе создание платформы для react приложения, которая использует mobx в качестве Model-и. Пройти путь от пустой директории проекта до рабочего примера. Рассмотреть основные моменты, на которые я обращал внимание в процессе разработки. Постараюсь насытить текст уточняющими ссылками, дополнительные заметки будут выделены курсивом с пометкой «Note:».
Рассказ будет состоять из двух частей:
- Готовим плацдарм для react приложения
- Mobx + react, взгляд со стороны
Буду писать «как я вижу», поэтому предложения и замечания по улучшению приветствуются. Надеюсь, читатель знает, что такое npm, node.js и react.js, имеет базовые знания о props и state. На момент написания статьи, у меня стоит windows и нестабильная node.js 7.3.0 версии.
Читать полностью »
«Hello, (real) world!» на php в 2017 году
2017-02-20 в 7:48, admin, рубрики: hello world, java, javascript, npm, php, React, ReactJS, redux, symfony, webpack, Разработка веб-сайтов
Вы наверняка думаете, что писать на php — это просто. И «hello, world» выглядит примерно так так:
<?php
echo 'Hello, world!';
Конечно, чего еще ожидать от языка с низким порогом входа. Ну да, именно так и было раньше. Много лет назад. Но теперь, в 2017 году никто так уже не делает. Давайте рассмотрим, почему, и попробуем построить наше более реалистичное hello-world приложение по шагам, а их, скажу сразу, получилось не мало.
Angular 1.x: крадущийся webpack, затаившийся grunt
2017-02-14 в 9:21, admin, рубрики: AngularJS, grunt, javascript, karma, webpack, Блог компании Новые облачные технологии, Программирование, система сборкиИстория о том, как мы поменяли сборку проекта с grunt на webpack
Приходишь на работу, открываешь IDE, пишешь npm start, запуская систему сборки, начинаешь работать. Тебе удобно ориентироваться в структуре проекта, удобно отлаживать код и стили, очевидно, как именно и в каком порядке собирается проект.
Проходит два года. В процессе разработки периодически задумываешься, куда правильно положить файлы с новым модулем, как быть с общими ресурсами, и не всегда с ходу отвечаешь на вопрос джуниора «а каким образом этот файл вообще попадает в бандл?». Или отвечаешь сакральное «так исторически сложилось» и тоскуешь по тому, что было два года назад.
Как выяснилось, такое случается, если не модернизировать систему сборки вместе с ростом проекта. Хорошая новость в том, что это успешно лечится! Летом мы подтвердили это в бою и хотим поделиться опытом.
Первый официальный релиз Webpack 2. Что нового по сравнению с Webpack 1?
2017-01-19 в 5:32, admin, рубрики: javascript, node.js, ReactJS, release, webpack, webpack 2, Блог компании DevExpress, Программирование, релиз
Предупреждение: проверьте, как установлена версия Webpack в package.json. Возможно скоро ваш continuous integration сломается.
Наконец-то Webpack 2 преодолел рубеж beta и release candidate. Это значит, что всё работает стабильно, и можно без опаски использовать его в production.
Список изменений/улучшений:
- Нативная поддержка ES6-модулей;
- Разбиение кода на чанки — Code Splitting with ES6;
- Поддержка динамических выражений при загрузке модулей — Dynamic expressions;
- Изменения при работе с Babel;
- ES6-специфичные оптимизации;
- Breaking Changes;
- Новый сайт с документацией.
Подробности под катом. Читать полностью »
Webpack в Visual Studio для больших солюшенов
2017-01-09 в 10:51, admin, рубрики: javascript, TypeScript, Visual Studio, webpack, Блог компании Mindbox
У нас в солюшене 51 проект. В 10 из них используется TypeScript. Объем минимизированного JavaScript-кода ~1 MB. TypeScript-код одних проектов зависит от кода других проектов. Для многих React-компонентов используются глобальные переменные.
Все вместе это приводит к долгим часам отладки front-end кода. Чтобы упростить себе жизнь, мы внедрили Webpack. А по пути отловили грабли.
TL;DR
- Устанавливаем node 7 + npm
- Выполняем в консоли
npm i -g webpack typescript - Устанавливаем Webpack Task Runner
- Добавляем webpack.config.js
в папку "основного" проекта - Добавляем webpack.config.part.js
в папку каждого зависимого проекта
Путь джесая, часть первая: typescript, webpack, jsx, custom elements…
2016-12-29 в 17:31, admin, рубрики: custom elements, html, javascript, jsx, ReactJS, TypeScript, webpack, метки: jsxНу что, мальчиши и мальчишки, а не пора ли вам познать джесай до? Не, ну вам то рано еще, а я вот пожалуй начну. Но вы можете присоединиться.
В череде последних статей про jsx/react и прочее я наблюдал наматывание соплей на кулак и прочие непотребства в обсуждениях, дескать как же нам без бабеля, а зачем нам jsx и прочее малодушничание. Будем пресекать. Сегодня мы будем строить webpack, прикрутим к нему typescript и jsx без реакта, соберем на tsx custom element без бабеля, зарегаем его и выведем на странице. Многие из вас сегодня повзрослеют, а некоторые возможно даже станут мужчинами.
Если вы боитесь что мир для вас никогда уже не будет прежним — не бойтесь, он прежним никогда и не был, так что заходите…
Читать полностью »
Очередной метод снизить объем SPA приложения (webpack)
2016-11-29 в 18:03, admin, рубрики: css, fronted development, javascript, Preprocessor, webpack, Разработка веб-сайтовТак уж случилось, что в последнее время мне приходится осваивать новые инструменты. Очередным таким инструментом стал webpack.
Инструмент интересный, но после переезда с Google Closure * для меня стало загадкой, почему webpack не ужимает имена классов, как это делает Google Closure Stylesheets.
За день, на коленке, мною был написан plugin который вполне не плохо реализовал этот функционал.
Более подробное описание ниже.
Читать полностью »