温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - How to deploy a React App on Apache web server
apache javascript reactjs

javascript - 如何在Apache Web服务器上部署React App

发布于 2020-04-06 00:19:15

我在这里https://www.tutorialspoint.com/reactjs/reactjs_jsx.htm创建了一个基本的React App ,我想在基于Apache的服务器上运行此测试代码,我知道我需要创建一个可分发的版本,但是我无法弄清楚该怎么做,无法找到明确的说明。

我已经在Apache服务器上看到了这篇React,js的文章但除了指导原则之外没有什么

查看更多

提问者
vishal dharankar
被浏览
155
1,299 2018-03-28 18:30

最终能够弄清楚,我只是希望它能对像我这样的人有所帮助。
以下是Web Pack配置文件的外观,请检查dist dir和指定的输出文件。我错过了指定dist目录路径的方法

const webpack = require('webpack');
const path = require('path');
var config = {
    entry: './main.js',

    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'index.js',
    },

    devServer: {
        inline: true,
        port: 8080
    },
    resolveLoader: {
        modules: [path.join(__dirname, 'node_modules')]
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',

                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    },
}

module.exports = config;

然后打包json文件

{
  "name": "reactapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack --progress",
    "production": "webpack -p --progress"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "webpack": "^2.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.0.20",
    "babel-loader": "^6.0.1",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-react": "^6.0.15",
    "babel-preset-stage-0": "^6.0.15",
    "express": "^4.13.3",
    "webpack": "^1.9.6",
    "webpack-devserver": "0.0.6"
  }
}

注意脚本部分和生产部分,生产部分为您提供了最终的可部署index.js文件(名称可以是任何东西)

休息吧,一切取决于您的代码和组件

执行以下命令序列

npm安装

这应该让您获得所有依赖性(节点模块)

然后

npm运行生产

这应该使您最终index.js文件包含所有捆绑的代码

完成后,将文件index.htmlindex.js文件放在www / html或Web应用程序的根目录下,仅此而已。