Intereting Posts

NodeJS,Webpack,意外的标记<

我是networking开发新手,刚刚完成我的第一个使用Webpack和React的辅助项目 。 我试图通过创build自己的NodeJS服务器而不是使用Webpack-dev-server从项目中使用的开发环境转移到生产环境。

这是我的代码:

webpack.production.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin'); var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ template: __dirname + '/app/index.html', filename: 'index.html', inject: 'body' }) var config = { devtool: 'source-map', entry: './app/index.js', output: { path: __dirname + '/dist', filename: "index_bundle.js", publicPath: __dirname + '/dist' }, module: { loaders: [ {test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}, {test: /\.(png|svg|ico)$/, exclude: /node_modules/, loader: "file?name=img/img-[hash:6].[ext]"} }, plugins: [HtmlWebpackPluginConfig] } module.exports = config; 

.babelrc

 { "presets": ["react"] } 

的package.json

 { "name": "weather-app", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "production": "NODE_ENV=production webpack -p --config webpack.production.config.js", "start": "webpack-dev-server", "start -p": "node server.js" }, "author": "", "license": "ISC", "dependencies": { "axios": "^0.15.0", "express": "^4.14.0", "react": "^15.3.2", "react-dom": "^15.3.2", "react-router": "^2.8.1" }, "devDependencies": { "babel-core": "^6.17.0", "babel-loader": "^6.2.5", "babel-preset-react": "^6.16.0", "file-loader": "^0.9.0", "html-webpack-plugin": "^2.22.0", "webpack": "^1.13.2", "webpack-dev-server": "^1.16.1" } } 

server.js

 var express = require('express'); var app = express(); app.use(express.static(__dirname + '/dist/img')); app.use(express.static(__dirname+ '/dist/index_bundle.js')); app.get('*', function(req,res) { res.sendFile(__dirname + '/dist/index.html'); }); var server = app.listen(5578, function() { var host = server.address().address; var port = server.address().port; console.log("Example app listening at http://%s:%s", host, port) }); 

和调用后在我的/ dist文件夹中生成的index.html

NODE_ENV =生产webpack -p –config webpack.production.config.js

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Weather App</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <style> html, body, .app { width: 100%; height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="app" class='app'></div> <script type="text/javascript" src="/home/cwelch/Code/weather-app/dist/index_bundle.js"></script></body> </html> 

打完电话后

节点server.js

当我导航到http:// localhost:5578 /我在控制台收到此错误

index_bundle.js:1未捕获的SyntaxError:意外的标记<

我无法弄清楚为什么会发生这种情况。 我怀疑我的JSX编译与巴贝尔错误,以及我的server.js错误。

有没有人有任何build议来解决这个问题? 另外,任何人都可以指点我阅读从开发到生产环境? 我想让我的第一个网站与AWS或Google Cloud一起生活,但我似乎无法find我需要的指导。

UPDATE

在我的webpackconfiguration文件中的publicPathvariables是什么搞砸了我。 我删除了这一行以及源地图,因为我不认为我需要它的生产。

Solutions Collecting From Web of "NodeJS,Webpack,意外的标记<"