Question

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

这里有很多答案，但是没有索引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配置为将单个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

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

1 个答案: