Webpack错误bundle.js：1未捕获的SyntaxError：意外的标记<
我运行服务器本地主机，并得到错误bundle.js：1未捕获SyntaxError：意外的标记<在输出bundle.js是index.html文件的html代码。 这是设置我的webpack.config文件。 你能告诉我设置有什么问题吗？
import path from 'path'; import webpack from 'webpack'; export default { devtool: 'eval-source-map', entry: [ 'webpack-hot-middleware/client', path.join(__dirname, '/client/index.js' ) ], output: { path: '/', publicPath: '/' }, plugins: [ new webpack.NoEmitOnErrorsPlugin(), new webpack.optimize.OccurrenceOrderPlugin(), new webpack.HotModuleReplacementPlugin() ], module: { loaders: [ { test: /\.js$/, include: path.join(__dirname, 'client'), loaders: ['react-hot-loader', 'babel-loader' ] } ] }, resolve: { extensions: ['.js'] } } 的index.html
<html> <head> <meta charset="UTF-8"> <title>Site</title> <meta content="width=device-width, initial-scale=1" name="viewport" /> </head> <body> <h1>Hello bla bla bla</h1> <div id="app"></div> <script src="bundle.js"></script> </body> </html>
服务器/ index.js
import express from 'express'; import path from 'path'; import webpack from 'webpack'; import webpackMiddeleware from 'webpack-dev-middleware'; import webpackHotMiddleware from 'webpack-hot-middleware'; import webpackConfig from '../webpack.config'; let app = express(); const compiler = webpack(webpackConfig); app.use(webpackMiddeleware(compiler, { hot: true, publicPath: webpackConfig.output.publicPath, noInfo: true })); app.use(webpackHotMiddleware(compiler)); app.get('/*', (req, res)=>{ res.sendFile(path.join(__dirname, './index.html')); }); app.listen('3000', ()=>{console.log('Running on port 3000')});
客户机/ index.js
import React from 'react'; import { render } from 'react-dom'; import App from './components/App'; render(<App/>, document.getElementById('app'));
组件/ App.js
import React from 'react'; class App extends React.Component { render(){ return ( <h1>Hello</h1> ); } } export default App;
的package.json：
{ "name": "xxxxx", "version": "1.0.0", "description": "xxxxxxxxxx", "main": "index.js", "scripts": { "server": "nodemon --watch server --exec babel-node -- server/index.js", "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "xxxxxxxxxxxxx" }, "keywords": [ " ], "author": "xxxxxxxxx", "license": "ISC", "bugs": { "url": "xxxxxxxxxxxxxxxxxxxxxxx" }, "homepage": "xxxxxxxxxxxxxxxxxxxx", "dependencies": { "babel-cli": "^6.24.1", "express": "^4.15.3", "react": "^15.5.4", "react-dom": "^15.5.4" }, "devDependencies": { "babel-loader": "^7.0.0", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "nodemon": "^1.11.0", "react-hot-loader": "^1.3.1", "webpack": "^2.6.1", "webpack-dev-middleware": "^1.10.2", "webpack-hot-middleware": "^2.18.0" } }
.babelrc
{ "presets": [ "es2015", "react" ] }
谢谢。
script标记中的bundle.js src是错误的。 这是返回你的主要index.html ，这就是为什么你得到这个错误 – JSparsing器试图parsing一个HTML文件。
您必须在脚本src中添加一个斜杠： <script src="/bundle.js"></script>
如果这不起作用，你必须仔细检查你的outputconfiguration。
您正在使用多个入口点，但不设置输出。
我已经通过添加filename项目对象输出解决了这个问题：
output: { path: '/', filename: 'bundle.js' },