Публикации по теме 'webpack-2'
Скопируйте все изображения / файлы в папку с помощью copy-webpack-plugin
В предыдущих уроках мы видели, как использовать url-loader и file-loader , которые позволяют webpack объединять / упаковывать изображения, используемые в нашем веб-приложении. Чтобы webpack знал, какие изображения использует наше приложение, мы должны сообщить webpack об этих изображениях как о наших зависимостях, импортировав / потребовав файлы изображений где-нибудь в наших зависимостях javascript, например
import homeIcon from '../images/home.png';
С webpack , позволяющим нам..
Разделить файл сборки администратора с помощью Webpack 2 + React-Router
Мы решили написать админку для нашего веб-приложения . Чтобы предотвратить увеличение размера файла сборки, мы можем написать другое приложение для раздела администратора. Написать другое приложение - действительно безумная идея. Есть еще одно решение: частичная загрузка для страниц администратора (отдельный файл сборки для администратора). Частичная загрузка приложения необходима, если вы хотите улучшить время до первого впечатления в своем одностраничном приложении.
Чтобы разделить..
Начало работы с webpack
Июнь 2017 редактирование: 3 только что выпущено ! Синтаксис для 3.x идентичен 2.x, что означает, что эта статья все еще актуальна (если я что-то пропустил, прокомментируйте!). Подъем версии был сделан для большего количества закулисных вещей, но он действительно добавил простой в добавлении плагин Scope Hoisting , который может сократить размер вашего пакета, который стоит проверить! Перейдите в конец статьи, чтобы перейти к разделу Обновление до 3 (спойлер: он не отменяет ничего..
Разделение кода в веб-пакете с динамическим импортом
С появлением таких сборщиков пакетов, как webpack, общая тенденция заключается в объединении всего JS-кода в один bundle.js файл. По мере расширения возможностей приложения размер bundle.js файла быстро увеличивается с простых КБ до МБ. Это отрицательно сказывается на производительности веб-страницы, поскольку теперь пользователю приходится ждать загрузки гигантского bundle.js файла, прежде чем он сможет взаимодействовать со страницей. Большая часть этого кода может даже не..
Ленивая загрузка с React + Redux и Webpack 2
Примечание I. Это продолжение Ленивой загрузки с помощью React и Webpack 2 . Поскольку здесь будет использоваться предыдущий пример, вам потребуется прочитать его и полностью понять эту статью.
Примечание II: поскольку в этой статье используются некоторые концепции Redux в примерах, важно, чтобы вы знали, как это работает, чтобы полностью понимать, что делается.
Добавление Redux в уравнение
Redux использует концепцию уникального состояния приложения, представленного..
Обработка изображений
Обычно есть два способа использования изображений в веб-приложении - с помощью тега ‹img› в HTML или через css, установив свойство 'background-image' в Класс или стиль css элемента HTML.
Изображения обычно хранятся либо на каком-то CDN, либо в отдельной папке на веб-сервере. В качестве местоположения изображения вы указываете URL-адрес изображения или относительный путь к изображению, если оно хранится в папке на сервере.
С помощью Webpack загрузку изображений можно оптимизировать с..
Настройка конфигурации Webpack - часть I
эта статья - первая часть базовой настройки веб-пакета для веб-приложений.
Настройка конфигурации Webpack - часть I (вы здесь) Настройка конфигурации Webpack - часть II
Webpack - один из самых популярных (›35,7 тыс. Звезд на github в день написания этого) javascript и других пакетов ресурсов, доступных для веб-разработки. Написав очень небольшую конфигурацию, вы можете начать с базовой настройки разработки.
В этой статье я покажу быструю настройку базовых конфигураций для..
