Не могу использовать файлы stati c в электронной кузнице

Question

У меня возникают проблемы с последовательной загрузкой изображений в Electron. Я использую Electron Forge с шаблоном веб-пакета https://www.electronforge.io/templates/webpack-template

Мой каталог sr c выглядит следующим образом:

├── images
│   └── black.png
├── index.css
├── index.html
├── index.js
├── main.js
└── renderer.js

Мой HTML код выглядит например:

<img src="images/black.png">

Я использую copy-webpack-plugin для копирования каталога images.

При работе в разработке (npm run start) root сервера разработки .webpack/renderer, поэтому изображение загружается. При работе в рабочей среде (npm run package) файл HTML открывается из файловой системы, поэтому тег изображения пытается получить доступ к .webpack/renderer/main_window/images, который находится в неправильном месте и не загружается.

Я получил его для работы как в разработке, так и в производстве, выполнив:

<img src="../images/black.png">

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

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

https://github.com/electron-userland/electron-forge/issues/1196

https://github.com/electron-userland/electron-forge/issues/941

Я могу придумать несколько способов решить эту проблему:

1. Конфигурация веб-пакета должна знать через какую-то переменную среды или флаг, если он запущен в процессе разработки или производства и изменения путь к копируемому веб-плагину "to".
2. Измените сервер разработки, чтобы он работал так, чтобы его root было .webpack/renderer/main_window

Я видел рекомендацию импортировать изображение в renderer.js, но у меня есть несколько тысяч изображений. Должен ли я сделать это так?

import './images/1.png';
import './images/2.png';
import './images/3.png';
// ...
import './images/1000.png';

Есть ли способ программного импорта? Что-то вроде:

let imageMap = {};
for (let i of Iter.range(1, 1001)) {
  let image = import(`./images/${i}.png`);
  imageMap[i] = image;
}

Тогда как бы я сослался на это в HTML? Можно ли это сделать без кода редактирования DOM?

Я предпочитаю не импортировать мои изображения в мой файл JavaScript и запускать их через загрузчики веб-пакетов. Я просто хочу сослаться на файлы stati c из моего кода HTML таким образом, чтобы это работало как при разработке, так и при производстве.

У меня также есть файл размером 5 МБ JSON, к которому мне нужно получить доступ, используя fetch(). Я попытался импортировать это через загрузчик, но процесс сборки занял более 5 минут, и я убил его.

Загрузка файлов stati c - это базовая c часть создания веб-страниц и должна быть частью шаблона проекта, если я не пропустил что-то супер очевидное.

Answer 1

Я смог решить эту проблему, запустив в производство сервер stati c Express, обслуживающий каталог renderer. Я использую абсолютные пути (/images/foo.png) для тегов изображений и могу получить доступ к моим файлам c.

webpack.renderer.config.js

const path = require('path');
const rules = require('./webpack.rules');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const assets = ['data', 'images'];
const copyPlugins = assets.map(asset => {
  return new CopyWebpackPlugin([
    {
      from: path.resolve(__dirname, 'src', asset),
      to: asset
    }
  ]);
});

module.exports = {
  module: {
    rules: [
      ...rules,
    ],
  },
  plugins: [
    ...copyPlugins,
  ]
};

main.js

import { app, BrowserWindow } from 'electron';
import path from 'path';
import express from 'express';

function isDebug() {
  return process.env.npm_lifecycle_event === 'start';
}

// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) { // eslint-disable-line global-require
  app.quit();
}

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 740,
  });

  if (isDebug()) {
    // Create the browser window.
    mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
    mainWindow.webContents.openDevTools();
  } else {
    const exApp = express();
    exApp.use(express.static(path.resolve(__dirname, '..', 'renderer')));
    const server = exApp.listen(0, () => {
      console.log(`port is ${server.address().port}`);
      mainWindow.loadURL(`http://localhost:${server.address().port}/main_window/`);
    });
  }
};

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);