我在这里从https://www.tutorialspoint.com/reactjs/reactjs_jsx.htm创建了一个基本的React应用程序,我想在基于Apache的服务器上运行这个测试代码,我知道我需要创建一个可分发的构建,但我不知道如何做到这一点,也找不到明确的说明.
我看过这篇React,js on Apache server篇博文,但它只有几条指导原则
我在这里从https://www.tutorialspoint.com/reactjs/reactjs_jsx.htm创建了一个基本的React应用程序,我想在基于Apache的服务器上运行这个测试代码,我知道我需要创建一个可分发的构建,但我不知道如何做到这一点,也找不到明确的说明.
我看过这篇React,js on Apache server篇博文,但它只有几条指导原则
最终,我终于找到了答案,我只是希望它能帮助像我这样的人
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"
}
}
请注意脚本部分和生产部分,生产部分给出了最终的可部署索引.js文件(名称可以是任何内容)
其余部分取决于您的代码和组件
执行以下命令序列
npm安装
这会让你获得所有的依赖( node 模块)
然后
npm运行生产
这将得到最终的index.js
个文件,其中将包含所有Bundle 的代码
完成后,将index.html
和index.js
个文件放在www/html或web应用程序根目录下,仅此而已.