如何在Apache服务器上部署没有index.html的react应用程序进行生产

Question

我有一个没有index.html页面的React应用程序。我的第一个反应应用程序所以请考虑我的专业水平。

这里有很多答案，但没有索引html入口点时。

我已经在XAMPP上的apache上成功运行这个应用程序，以便在localhost：7000（没有index.html）上进行开发。这很好，因为我的webpack在内存中加载了一个包js。我使用命令"server": "node app.js",来运行热负载的本地服务器。

这是我的webpack配置的一部分。

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

到目前为止我所拥有的：

• 我已经将webpack配置为将一个包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文件Webpack HTML Plugin Docs