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

Question

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

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

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

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

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

到目前为止我所拥有的：

• 我已将 webpack 配置为将单个 bundle 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