Razzle: Как загрузить изображения и другие статические ресурсы?

например, и для шрифтов вы можете добавить следующее:

,
{
  test: /\.(woff)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
  loader: "url?limit=100000&mimetype=application/font-woff"
}

сервер не понимает расширение изображения, вам нужно использовать require hook для ssr
https://github.com/bahmutov/node-hook

также вы можете добавить в этот файловый сервер

require('babel-register')
if (development variable) require.extensions['.png'] = function () {};
require('./server')

Я использовал https://github.com/tcoopman/image-webpack-loader для работы с изображениями. Я думаю, что он основан на загрузчике файлов, но позволяет оптимизировать изображения.

закрытие этого

@jaredpalmer Привет, чувак, спасибо за

// logo-component.js
import LogoImage from './logo.png' // colocated image in component folder

export default ({ linkUrl }) =>
  <a href={linkUrl}>
    <img src={LogoImage} alt="Logo" /> 
  </a>

Я использовал webpack-isomorphic-tools для обработки вышеуказанных случаев, что работает, но эргономика и настройка кажутся очень хрупкими и хакерскими ... Я собираюсь начать другой проект, было бы действительно здорово услышать ваши мысли и подход - похоже, что assets.json можно использовать и для статики

Еще раз спасибо, Джаред, любое направление, шаблон или конфигурация веб-пакета, которую вы могли бы предоставить, были бы очень признательны, и я был бы счастлив отправить PR, если это то, что вы хотите добавить в стартер

я подозреваю, что я, вероятно, упускаю из виду супер простое решение .... еще раз спасибо !! :)

Все, что вам нужно сделать, это установить url-loader через npm, а затем добавить следующее в каждый файл webpack.config:

      ....
      {
        test: /\.(gif|jpe?g|png|ico)$/,
        loader: 'url-loader?limit=10000'
      },
      {
        test: /\.(otf|eot|svg|ttf|woff|woff2).*$/,
        loader: 'url-loader?limit=10000'
      }
      ...

Затем вы можете просто потребовать их точно так, как вы описали выше. Кстати, параметр limit просто сообщает url-loader при каком пороге он должен фактически генерировать изображение, а не создавать data-uri.

РЕДАКТИРОВАТЬ:

Также удалите new webpack.IgnorePlugin(/\.(css|less|scss|svg|png|jpe?g|png)$/), из конфигурации сервера webpack.

@jaredpalmer спасибо за ответ :) это именно та проблема, с которой я https://www.npmjs.com/package/webpack-isomorphic-tools, но это действительно кажется очень неуклюжий ...

@ rowellx68 вы упомянули об использовании image-webpack-loader - не могли бы вы уточнить?

@ b2 Что бы вы не могли предоставить дополнительный контекст или пример для вашего решения node-hook ? есть ли способ интегрироваться с плагином ресурсов, чтобы мы могли использовать единый манифест?

@justingreenberg babel-register не может обрабатывать типы файлов изображений, обходной путь - изменить сервер :

require('babel-register');
if (process.env.NODE_ENV == 'development') {
  require.extensions['.png'] = function () {};
  require.extensions['.jpg'] = function () {};
  require.extensions['.jpeg'] = function () {};
  require.extensions['.woff'] = function () {};
  require.extensions['.woff2'] = function () {};
  require.extensions['.ico'] = function () {};
  require.extensions['.svg'] = function () {};
}
require('./server');

@justingreenberg image-webpack-loader просто оптимизирует ваши изображения ... вы должны использовать его в тандеме с file-loader :

...
      {
        test: /\.(png|jpg|jpeg|gif)(\?.*)?$/,
        loaders: [
          'file',
          'image-webpack?' + JSON.stringify({
            bypassOnDebug:true,
            progressive: true,
            optimizationLevel: 7,
            interlaced: true,
            pngquant: {
              quality: "65-90",
              speed: 4
            },
            svgo: {
              removeUnknownsAndDefaults: false,
              cleanupIDs: false
            }
          })
        ]
      },

Я бы все равно использовал url-loader для шрифтов и svg с этим.

@ rowellx68 @ b2как мы должны создать PR для этого с помощью url-loader ? Каковы недостатки require.extension в dev? Это уродливо, но чище, чем комплектовать сервер только для разработчиков ИМХО. 🤔

@jaredpalmer re: исправление требует обходного пути, это интересный подход ... поэтому ручная регистрация расширений с помощью require просто позволяет модулю нажать url-loader , имеет смысл!

re: image-webpack, это было мое понимание (на самом деле оптимизация), но я подумал, что, может быть, мне что-то не хватает для использования узла, поскольку @ rowellx68 сказал, что использует его для изображений

еще раз спасибо!

@jaredpalmer require.extensions устарел ?

@justingreenberg re: image-webpack-loader . Это действительно в первую очередь для оптимизации изображений. Однако полученные изображения не были добавлены в assest.json .

@ rowellx68
нам нужен режим slice dev и prod. Конфигурация webpack может быть другой. В режиме разработки нам нужно с сервера получить нормальный url изображения. В прод-режиме мы можем использовать любые оптимизации

Я модифицировал скрипты сборки. Теперь у вас есть папка pbulic для robots.txt, favicon и т. Д. Это не «идеальное решение», но оно работает. Связки js -> public/assets (что не проверено в git).

Исследуем @justingreenberg «s решение requireHooks как позволит встраивание и кэш перебора.

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

Я новичок в мире веб-пакетов (читайте: пока не знаю, как его использовать), и я пытаюсь использовать этот проект для создания веб-приложения, используя руководство по стилю для клиента. вместо того, чтобы повторно применять стили CSS снова и снова, я пытаюсь загрузить файл CSS, содержащий руководство по стилю для клиента. есть ли быстрый и относительно безболезненный способ статически загрузить их таблицу стилей, а затем использовать афродит для управления макетом и т. д.?

Как насчет объединения записи сервера с веб-пакетом с использованием опции target: 'node' ?
У нас были бы все возможности загрузчиков веб-пакетов на стороне сервера без необходимости взламывать node require () или использовать инструменты webpack-isomorphic-tools.
Или в этом подходе есть серьезная проблема или недостаток, которого я не вижу? кроме того, что при разработке нужно иметь два часа webpack

Изменить: только что увидел, что это уже делается для prod, но почему бы и не dev?