2017-01-30 17 views
0

My webpack-dev-serverはうまく動作しますが、express.jsと似たようなことを達成したいと考えていました。しかし、私はUncaught SyntaxError: Unexpected token <エラーが発生しています。以下は Express Uncaught SyntaxError:予期しないトークン<

は私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 

は君たちが何か提案を持っているなら、私に教えてください。

ありがとうございます!

+0

あなたは、私がtransformed.jsに内蔵されていると仮定し、あなたのindex.jsファイルのコードを含める必要があります:あなたはあなたの資産sの? –

+0

私は問題がこの行にあると思います: 'res.sendFile(path.join(__ dirname、 '../ app/index.html'));' urは現在の 'dirname'を' index.html'のパスに結合しますファイル、その場所にnファイルが存在しません: 'res.sendFile( '../ app/index.html');' –

+0

私の質問を更新しました@AndrewFont – Manu

答えて

1

よろしくお願いいたします。問題は私の資産がメモリから提供されていないことでした。私の場合、解決策はwebpack-dev-middlewareでした。

これは私が私のserver.jsに追加したものです:

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

コンパイラは、あなたのWebPACKの輸出です:

const webpack = require('webpack'); const config = require('../webpack.config'); const compiler = webpack(config);

publicPathがであなたのoutputを指している必要がありますあなたのwebpack.config

output: { path: path.join(__dirname, 'build'), publicPath: '/', filename: 'transformed.js' },

関連する問題