php react打包,webpack,react.js_webpack+react打包后的文件如何在Apache服务器上部署？，webpack,react.js - phpStudy...

webpack+react打包后的文件如何在Apache服务器上部署？

今天按照网上的教程学习了webpack+react，虽然在浏览器中访问http://localhost:8080/可以看到效果，但还是有好多疑问。

npm start webpack-dev-server --hot --inline后却找不到打包后的bundle.js文件，这个bundle.js文件在哪呢？

npm run build打包后的bundle.js文件可以看到，但是在浏览器中访问index.html文件的绝对路径页面什么都没有，console中提示Download the React DevTools and use an HTTP server (instead of a file: URL) for a better development experience:，因为我的Apache服务器根目录是www,在浏览器中访问 http://localhost/public/index.html 也没有任何反应，console中提示Download the React DevTools for a better development experience:。难道我只能用http://localhost:8080/ 访问吗？怎么才能访问http://localhost/public/index.html 有效果，也就是说如何把打包后的文件放在Apache服务器中部署。

项目目录树：

package.json文件 scripts部分：

"scripts": {

"start": "webpack-dev-server --hot --inline",

"build": "webpack --progress --profile --colors --config webpack.production.config.js"

},

webpack.config.js:

let path = require('path');

//定义了一些文件夹的路径

let ROOT_PATH = path.resolve(__dirname);

let APP_PATH = path.resolve(ROOT_PATH, 'app');

let BUILD_PATH = path.resolve(ROOT_PATH, 'public');

module.exports = {

devtool: 'eval-source-map',

entry: __dirname + '/app/main.js',

output: {

path: BUILD_PATH,

filename: 'bundle.js'

},

module: {

loaders: [

{

test: /\.less$/,

loaders: ['style', 'css', 'less','postcss'],

include: APP_PATH

},

{

test: /\.jsx?$/,

loader: 'babel',

include: APP_PATH,

resolve: {

extensions: ['', '.js', '.jsx']

}

}

]

},

postcss: [

require('autoprefixer')//调用autoprefixer插件

],

devServer: {

contentBase: './public',

colors: true,

historyApiFallback: true,

inline: true

}

}

webpack.production.config.js:

let path = require('path');

let webpack = require('webpack');

//定义了一些文件夹的路径

let ROOT_PATH = path.resolve(__dirname);

let APP_PATH = path.resolve(ROOT_PATH, 'app');

let BUILD_PATH = path.resolve(ROOT_PATH, 'public');

let ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {

entry: __dirname + '/app/main.js',

output: {

path: BUILD_PATH,

filename: 'bundle.js'

},

module: {

loaders: [

{

test : /\.(less|css)$/,

loader: ExtractTextPlugin.extract('style', 'css!less')

},

{

test: /\.jsx?$/,

loader: 'babel',

include: APP_PATH,

resolve: {

extensions: ['', '.js', '.jsx']

}

}

]

},

postcss: [

require('autoprefixer')//调用autoprefixer插件

],

plugins: [

//new webpack.optimize.UglifyJsPlugin(),

//new webpack.optimize.CommonsChunkPlugin('common.js'),

new ExtractTextPlugin('css/[name].css')

]

}

.babelrc:

{

"presets": ["react", "es2015"],

"env": {

// only enable it when process.env.NODE_ENV is 'development' or undefined

"development": {

"plugins": [["react-transform", {

"transforms": [{

"transform": "react-transform-hmr",

// if you use React Native, pass "react-native" instead:

"imports": ["react"],

// this is important for Webpack HMR:

"locals": ["module"]

}]

// note: you can put more transforms into array

// this is just one of them!

}]]

}

}

}

index.html

Webpack Sample Project

main.js入口文件

import React, {Component} from 'react';

import ReactDOM from 'react-dom';

class App extends Component{

constructor(props) {

super(props);

}

render() {

let backgroundSrc = './imgs/gondel.jpg';

return (

{backgroundSrc}

);

}

}

ReactDOM.render(,document.getElementById('root'));

访问http://localhost/public/index.html时浏览器错误提示：

相关阅读:

mysql优化的常用方法有哪些？？

html接收res.render数据

JavaScript要是不用

请问seajs怎样引进非CMD的框架？

centos7.2安装php7.1后配置listen的问题

有哪些预测算法可以根据实时增量数据更新算法并预测后续数据？

蚂蚁金服的calendar组件怎么赋值

对于“Javascript天生异步“这句话不太理解

请问datagrip怎么创建数据库？

spring BeanFactory getbean方法是怎么搜索出对应的类的

antdesign的menu如何点击标签显示对应的内容呢

echarts插件 ：嵌套环形图 怎么把值传入。代码如下。

介绍一个开源的带商品购买的CMS系统

关于比较运算符==

ckplayer连续播放的时候会卡在第一针

为什么不让浏览器能够直接跑PHP？而只有Javascript

springMVC或spring的异常信息，怎么返回给当前页面？

electron autoUpdater 签名

docker exec 报错，怎么回事？

一个父div下有两个子div和两个子input，如图１，如何使他们对齐成图2的样子?