Question

我是网络开发的新手，刚刚使用Webpack和React完成了我的第一个assisted project。我试图通过创建自己的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)
});

调用

后，在my / 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>

致电后

node server.js

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

index_bundle.js：1未捕获的SyntaxError：意外的令牌＆lt;

我无法弄清楚为什么会这样。我怀疑我的Babel JSX编译中的错误以及我的server.js中的错误。

有没有人有任何建议来解决这个问题？还有，有人能指出我从阅读开发到生产环境的阅读内容吗？我想用AWS或Google Cloud获取我的第一个网站，但我似乎找不到我需要的指导。

更新

我的webpack配置文件中的publicPath变量让我感到困惑。我删除了该行以及源映射，因为我认为我不需要它用于生产。

NodeJS，Webpack，意外的令牌＆lt;

0 个答案: