File loader webpack как настроить

Как загрузить файлы изображений с помощью Webpack file-loader

я использую webpack управлять reactjs. Я хочу загрузить изображения в javascript с помощью webpack file-loader . Ниже находится webpack.конфиг.js:

я использую эту строку для загрузки файлов изображений и копирования их в каталог dist/public/icons и сохранения того же имени файла.

но у меня есть две проблемы с его использованием. Когда я бегу webpack команда, файл изображения был скопирован в dist / public / icons/ каталог, как и ожидалось. Как, ver он также был скопирован в каталог dist с этим именем файла «df55075baa16f3827a57549950901e90.формат PNG.»

ниже моя структура проекта:

другая проблема заключается в том, что я использую ниже код для импорта этого файла изображения, но он не может отображаться в браузере. Если я использую url ‘ public / icons / imageview_item_normal.png ‘ на теге img, он отлично работает. Как использовать объект, импортированный из файла образа?

4 ответов

относительно проблемы #1

после настройки загрузчика файлов в webpack.config, когда вы используете import / require он проверяет путь против всех загрузчиков, и в случае совпадения он передает содержимое через этот загрузчик. В вашем случае он соответствовал

и поэтому вы видите изображение, излучаемое

которая хотела поведения.

причина, по которой вы также получаете имя хэш-файла, потому что вы добавляете дополнительный встроенный загрузчик файлов. Вы импортируете изображение как:

начинаются с file! , снова передает файл в загрузчик файлов, и на этот раз у него нет конфигурации имени.

таким образом, ваш импорт должен быть просто:

обновление

как отметил @cgatian, если вы действительно хотите использовать встроенный загрузчик файлов, игнорируя глобальную конфигурацию webpack, вы можете префикс импорта с двумя восклицательными знаками (!!):

относительно проблемы #2

после импорта png, img переменная содержит только путь, о котором «знает» загрузчик файлов, то есть public/icons/[name].[ext] (он же «file-loader? name=/public/icons/[name].[ext]» ). Ваш выходной dir «dist» неизвестен. Вы можете решить это двумя способами:

1. запустите весь свой код в папке «dist»
2. добавить publicPath свойство вашей выходной конфигурации, которое указывает на ваш выходной каталог (в ваш случай. /расстояние.)

у меня была проблема с загрузкой изображений в мой проект React JS. Я пытался использовать загрузчик файлов для загрузки изображений; я также использовал Babel-loader в моей реакции.

я использовал следующие настройки в webpack:

это помогло загрузить мои изображения, но загруженные изображения были повреждены. Затем после некоторых исследований я узнал, что файл-загрузчик имеет ошибку повреждения изображений при установке babel-loader.

следовательно, работать вокруг вопрос я попытался использовать URL-загрузчик, который отлично работал для меня.

я обновил свой webpack со следующими настройками

затем я использовал следующую команду для импорта изображений

Источник

Введение в Webpack для новичков

Dec 23, 2018 · 7 min read

Что такое Webpack?

Webpack — это инструмент, позволяющий скомпилировать, например, JavaScript модули в единый JS-файл. Webpack также известен как сборщик модулей.

При большом количестве файлов он создает один объемный файл (или несколько файлов) для запуска вашего приложения.

Он также способен выполнять множество иных операций:

• помогает собрать воедино ваши ресурсы
• следит за изменениями и повторно выполняет задачи
• может выполнить транспиляцию JavaScript следующего поколения до более старого стандарта JavaScript (ES5) с помощью Babel, что позволит использовать новейшие функции JavaScript, не беспокоясь о том, поддерживает их браузер или нет
• может выполнить транспиляцию CoffeeScript в JavaScript
• может конвертировать встроенные изображения в data:URI
• позволяет использовать require() для CSS файлов
• может запустить webpack-dev-server (в нём встроен локальный сервер и livereload (“живая перезагрузка браузера”))
• может работать с Hot Module Replacement (замена горячего модуля)
• может разделить выходной файл (output file) на несколько файлов, чтобы избежать медленной загрузки страницы из-за большого размера JS-файла
• может выполнить Tree Shaking

Webpack не ограничивается одним лишь фронтендом, его также успешно применяют в бэкенд разработке на Node.js.

У Webpack есть предшественники, у которых он перенял многие идеи. Основное различие заключается в том, что те инструменты известны как task runners (такс-раннеры), в то время как Webpack ничто иное, как сборщик модулей.

Webpack — э т о более целенаправленный инструмент. Вам достаточно указать точку входа в ваше приложение (это может быть даже HTML-файл с тегами

Источник

Webpack: руководство для начинающих

Доброго времени суток, друзья!

Представляю вашему вниманию перевод статьи «Webpack: A gentle introduction» автора Tyler McGinnis.

Перед изучением новой технологии задайте себе два вопроса:

1. Зачем нужен этот инструмент?
2. Какие задачи он выполняет?

Если вы не можете ответить на эти вопросы, возможно, вам не нужна изучаемая технология. Давайте попробуем ответить на эти вопросы применительно к Webpack.

Зачем нужен вебпак?

Вебпак — это сборщик модулей. Он анализирует модули приложения, создает граф зависимостей, затем собирает модули в правильном порядке в один или более бандл (bundle), на который может ссылаться файл «index.html».

Какие проблемы решает вебпак?

Обычно, при создании приложения на JavaScript, код разделяется на несколько частей (модулей). Затем в файле «index.html» необходимо указать ссылку на каждый скрипт.

Это не только утомительно, но и подвержено ошибкам. Важно не только не забыть про какой-нибудь скрипт, но и расположить их в правильном порядке. Если загрузить скрипт, зависящий от React, до загрузки самого React, приложение сломается. Вебпак решает эти задачи. Не нужно беспокоиться о последовательном включении всех скриптов.

Как мы скоро узнаем, сбор модулей является лишь одним из аспектов работы вебпака. При необходимости можно заставить вебпак осуществить некоторые преобразования модулей перед их добавлением в бандл. Например, преобразование SASS/LESS в обычный CSS, или современного JavaScript в ES5 для старых браузеров.

Установка вебпака

После инициализации проекта с помощью npm, для работы вебпака нужно установить два пакета — webpack и webpack-cli .

webpack.config.js

После установки указанных пакетов, вебпак нужно настроить. Для этого создается файл webpack.config.js , который экспортирует объект. Этот объект содержит настройки вебпака.

Основной задачей вебпака является анализ модулей, их опциональное преобразование и интеллектуальное объединение в один или более бандл, поэтому вебпаку нужно знать три вещи:

1. Точка входа приложения
2. Преобразования, которые необходимо выполнить
3. Место, в которое следует поместить сформированный бандл

Точка входа

Сколько бы модулей не содержало приложение, всегда имеется единственная точка входа. Этот модуль включает в себя остальные. Обычно, таким файлом является index.js. Это может выглядеть так:

Если мы сообщим вебпаку путь до этого файла, он использует его для создания графа зависимостей приложения. Для этого необходимо добавить свойство entry в настройки вебпака со значением пути к главному файлу:

Преобразования с помощью лоадеров (loaders)

После добавления точки входа, нужно сообщить вебпаку о преобразованиях, которые необходимо выполнить перед генерацией бандла. Для этого используются лоадеры.

По умолчанию при создании графика зависимостей на основе операторов import / require() вебпак способен обрабатывать только JavaScript и JSON-файлы.

Едва ли в своем приложении вы решитесь ограничиться JS и JSON-файлами, скорее всего, вам также потребуются стили, SVG, изображения и т.д. Вот где нужны лоадеры. Основной задачей лоадеров, как следует из их названия, является предоставление вебпаку возможности работать не только с JS и JSON-файлами.

Первым делом нужно установить лоадер. Поскольку мы хотим загружать SVG, с помощью npm устанавливаем svg-loader.

Далее добавляем его в настройки вебпака. Все лоадеры включаются в массив объектов module.rules :

Информация о лоадере состоит из двух частей. Первая — тип обрабатываемых файлов ( .svg в нашем случае). Вторая — лоадер, используемый для обработки данного типа файлов ( svg-inline-loader в нашем случае).

Теперь мы можем импортировать SVG-файлы. Но что насчет наших CSS-файлов? Для стилей используется css-loader .

Теперь мы можем импортировать как SVG, так и CSS-файлы. Однако для того, чтобы наши стили работали корректно, нужно добавить еще один лоадер. Благодаря css-loader мы можем импортировать CSS-файлы. Но это не означает, что они будут включены в DOM. Мы хотим не только импортировать такие файлы, но и поместить их в тег , чтобы они применялись к элементам DOM. Для этого нужен style-loader .

Обратите внимание, что поскольку для обработки CSS-файлов используется два лоадера, значением свойства use является массив. Также обратите внимание на порядок следования лоадеров, сначала style-loader , затем css-loader . Это важно. Вебпак будет применять их в обратном порядке. Сначала он использует css-loader для импорта ‘./styles.css’ , затем style-loader для внедрения стилей в DOM.

Лоадеры могут использоваться не только для импорта файлов, но и для их преобразования. Самым популярным является преобразование JavaScript следующего поколения в современный JavaScript с помощью Babel. Для этого используется babel-loader .

Существуют лоадеры почти для любого типа файлов.

Точка выхода

Теперь вебпак знает о точке входа и лоадерах. Следующим шагом является указание директории для бандла. Для этого нужно добавить свойство output в настройки вебпака.

Весь процесс выглядит примерно так:

1. Вебпак получает точку входа, находящуюся в ./app/index.js
2. Он анализирует операторы import / require и создает граф зависимостей
3. Вебпак начинает собирать бандл, преобразовывая код с помощью соответствующих лоадеров
4. Он собирает бандл и помещает его в dist/index_bundle.js

Плагины (plugins)

Мы рассмотрели, как использовать лоадеры для обработки отдельных файлов перед или в процессе генерации бандла. В отличие от лоадеров, плагины позволяют выполнять задачи после сборки бандла. Эти задачи могут касаться как самого бандла, так и другого кода. Вы можете думать о плагинах как о более мощных, менее ограниченных лоадерах.

Давайте рассмотрим пример.

HtmlWebpackPlugin

Основной задачей вебпака является генерация бандла, на который можно сослаться в index.html .

HtmlWebpackPlugin создает index.html в директории с бандлом и автоматически добавляет в него ссылку на бандл.

Мы назвали бандл index_bundle.js и поместили его в dist . HtmlWebpackPlugin создаст новый файл index.html в директории dist и добавит в него ссылку на бандл — . Здорово, правда? Поскольку index.html генерируется HtmlWebpackPlugin , даже если мы изменим точку выхода или название бандла, HtmlWebpackPlugin получит эту информацию и изменить содержимое index.html .

Как нам использовать этот плагин? Как обычно, сначала его нужно установить.

Далее добавляем в настройки вебпака свойство plugins .

Создаем экземпляр HtmlWebpackPlugin в массиве plugins .

EnvironmentPlugin

Если вы используете React, то захотите установить process.env.NODE_ENV в значение production перед разворачиванием (деплоем) приложения. Это позволит React осуществить сборку в режиме продакшна, удалив инструменты разработки, такие как предупреждения. Вебпак позволяет это сделать посредством плагина EnvironmentPlugin . Он является частью вебпака, так что его не нужно устанавливать.

Теперь в любом месте нашего приложения мы можем установить режим продакшна с помощью process.env.NODE_ENV .

HtmlWebpackPlugin и EnvironmentPlugin — это лишь небольшая часть системы плагинов вебпака.

Режим (mode)

В процессе подготовки приложения к продакшну, необходимо выполнить несколько действий. Мы только что рассмотрели одно из них — установку process.env.NODE_ENV в значение production . Другое действие заключается в минификации кода и удалении комментариев для уменьшения размера бандла.

Существуют специальные плагины для решения указанных задачи, но есть более легкий способ. В настройках вебпака можно установить mode в значение development или production в зависимости от среды разработки.

Обратите внимание, что мы удалили EnvironmentPlugin . Дело в том, что после установки mode в значение production вебпак автоматически присваивает process.env.NODE_ENV значение production . Это также минифицирует код и удаляет предупреждения.

Запуск вебпака

На данный момент мы знаем, как работает вебпак и как его настраивать, осталось его запустить.

У нас есть файл package.json , в котором мы можем создать script для запуска webpack .

Теперь при выполнении команды npm run build в терминале будет запущен вебпак, который создаст оптимизированный бандл index_bundle.js и поместит его в dist .

Режимы разработки и продакшна

В целом, мы закончили с вебпаком. Напоследок давайте рассмотрим, как переключаться между режимами.

При сборке для продакшна, мы хотим все оптимизировать, насколько это возможно. В случае с режимом разработки верно обратное.

Для переключения между режимами необходимо создать два скрипта в package.json .

npm run build будет собирать продакшн-бандл.

npm run start будет запускать сервер для разработки и следить за изменениями файлов.

Если помните, мы установили mode в значение production в настроках вебпака. Однако теперь нам это не нужно. Мы хотим, чтобы переменная среды имела соответствующее значение в зависимости от выполняемой команды. Немного изменим скрипт build в package.json .

Если у вас Windows, то команда будет такой: «SET NODE_ENV=’production’ && webpack» .

Теперь в настроках вебпака мы можем менять значение mode в зависимости от process.env.NODE_ENV .

Для сборки готового бандла для нашего приложения мы просто запускаем npm run build в терминале. В директории dist создаются файлы index.html и index_bunlde.js .

Сервер для разработки

Когда речь идет о разработке приложения принципиально важное значение имеет скорость. Мы не хотим презапускать вебпак и ждать новую сборку при каждом изменении. Вот где нам пригодится пакет webpack-dev-server .

Как следует из названия, это вебпак-сервер для разработки. Вместо создания дирекории dist , он хранит данные в памяти и обрабатывает их на локальном сервере. Более того, он поддерживает живую перезагрузку. Это означает, что при любом изменении webpack-dev-server пересоберет файлы и перезапустит браузер.

Все, что осталось сделать, это добавить скрипт start в package.json .

Теперь у нас имеется две команды: одна для запуска сервера для разработки, другая для сборки готового бандла.

Надеюсь, статья была вам полезной. Благодарю за внимание.

Источник