我的 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
如果你们有任何建议,请告诉我。
谢谢!
答案 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