Express Uncaught SyntaxError:意外的标记<

时间:2017-01-30 16:09:38

标签: reactjs express webpack webpack-dev-server

我的 webpack-dev-server 工作正常,但我希望通过 express.js 实现类似功能。但是,我收到Uncaught SyntaxError: Unexpected token <错误。

以下是我的server.js:

const express = require('express');
const webpack = require('webpack');
const path = require('path');
const open = require('open');

const port = 3000;
const app = express();

app.get('*', function (req, res) {
  res.sendFile(path.join(__dirname, '../app/index.html'));
});

app.listen(port, function (err) {
  if (err) {
    console.log(err);
  } else {
    open(`http://localhost:${port}`);
  }
});

以下是我的index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Yes boy</title>
</head>
<body>
  <div id="app"></div>
  <script type="text/javascript" src="transformed.js"></script>
</body>
</html>

Index.js代码:

/* eslint-disable no-unused-vars */

import React from 'react';
const ReactDOM = require('react-dom');
const routes = require('./routes');
const GlobalCSS = require('./styles/main.scss');

/* eslint-disable no-unused-var */

ReactDOM.render(routes, document.getElementById('app'));

routes.js

const routes = ( // eslint-disable-line no-extra-parens
  <Router history={browserHistory} onUpdate={hashLinkScroll}>
    <Route path="/" component={App} />
    <Route path="nav" component={Nav} />
    <Route path="hero" component={Hero} />
    <Route path="about" component={About} />
    <Route path="/" component={Contact} />
    <Route path="footer" component={Footer} />
    <Route path="building" component={Building} />
    <Route path="*" component={NotFound} />
  </Router>
);

module.exports = routes;

我的文件夹结构如下:

project
  app/
    components/
      App.js
    index.html
    index.js
    routes.js
  build/
    index.html
    transformed.js
  tools/
    server.js
  webpack.config.js

如果你们有任何建议,请告诉我。

谢谢!

1 个答案:

答案 0 :(得分:1)

好的,现在一切正常。问题在于我的资产没有从内存中提供。解决方案是在我的情况下使用onPropertyChange

这是我添加到webpack-dev-middleware

的内容

server.js

编译器是您的webpack导出:

app.use(require('webpack-dev-middleware')(compiler, { publicPath: config.output.publicPath }));

publicPath 应该指向const webpack = require('webpack'); const config = require('../webpack.config'); const compiler = webpack(config);中的output,它可以为您提供资产:

webpack.config