Как развернуть приложение реакции, у которого нет index.html, на сервере apache для производства

Question

У меня есть приложение React, у которого нет страницы index.html.Мое самое первое приложение реагировать, поэтому, пожалуйста, учитывайте мой уровень знаний

Здесь много ответов, но только если нет точки входа html-индекса.

Я уже успешно запускаю это приложение на apache на XAMPP для разработки на localhost: 7000 (без index.html).Это работает нормально, потому что мой веб-пакет загружает пакет JS в память.Я использую команду "server": "node app.js", для запуска горячо загруженного локального сервера.

Вот часть моей конфигурации веб-пакета.

  module.exports = {
  entry: './src/main.js',
  output: {
    path: join(__dirname, '/dist/js/'),
    filename: 'bundle.js',
    publicPath: '/',
  },

Что у меня есть:

• Я настроил веб-пакет для записи одного js-файла пакета в мою папку dist / js
• У меня все изображения хранятся в папке dist / images
• Я добавил все вышеуказанные папки и связкуjs в корень папки XAMPP (htdocs).

Вот моя структура каталогов, которая работала для Dev:

config
dist
node_modules
routes (contains all routes for the App)
src (Has all components and entry is main.js)
styles (Has scss but it gets compiled into a single dist/styles/style.css)
views (Has all handle bar files for views)
-app.js (Main entry with express and webpack config references)
-app-routes (routes for the app)
-env,js(Has environment variables such as database connection details, port)
-webpack.config.js
-nodemon.json
-package.json

После yarn run prod я получаю папку dist, как показано ниже

images (all images for app)
js (contains bundle.js file)
styles (contains compiled style.css)

Чтофайлы я должен добавить в корневую папку htdocs?

Answer 1

В ваших webpack.config.js в ваших плагинах добавьте это

Где-нибудь наверху сделай это.

var HtmlWebpackPlugin = require('html-webpack-plugin');

А в свои плагины добавь это

plugins: [
  new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: './index.html'
  }),
],

Что это будет делать, это создать файл index.html и внедрить ваши файлы .js & .css, если они есть, в файл html

Вы можете узнать больше об этом плагине webpack для создания динамического файла index.html Документы плагина HTML Webpack