的WebPack错误bundle.js：1未捕获的SyntaxError：意外令牌<

我正在运行的服务器本地主机，并得到误差bundle.js：1未捕获的SyntaxError：意外令牌< 在输出bundle.js是index.html文件的HTML代码。这是设置我的webpack.config文件。你能告诉我设置有什么问题吗？的WebPack错误bundle.js：1未捕获的SyntaxError：意外令牌<

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" ] 
}

谢谢。

来源

2017-06-14 Stefan Hansch

怎么是你'客户端/ index.js'？我在问题的主体中添加了 – enapupe

。 –

这很可能是您缺少对JSX的支持。 – enapupe

您正在使用多个入口点但未设置输出。

http://webpack.github.io/docs/configuration.html#entry

来源

2017-06-14 12:25:03 Tuko90

对不起，但是如何设置输出？我添加了输出：{ path：'/' publicPath：'/' } –

尝试在您的输出中添加文件名：{path：'/'publicPath：'/'filename：'bundle.js'}并检查如果正如enapupe在评论中所说的那样正确设置路径路线。为什么你需要'webpack-hot-middleware/client'作为入口点？ – Tuko90

hm ...是的，我添加了文件名：'bundle.js'，现在工作。我需要webpack-hot-middleware/client在浏览器上更改数据而无需重新加载页面 –

你bundle.js SRC在script标签是错误的。它返回你的主要index.html，这就是为什么你会得到这个错误 - JS解析器试图解析一个HTML文件。

必须斜线添加到您的脚本源： <script src="/bundle.js"></script>

如果不工作，你必须仔细检查你output配置。

来源

2017-06-14 13:31:13 enapupe

我有同样的问题，我认为你指出了正确的方向。我在HTML文件中复制了脚本标记因为你可以看起来很好。我想知道如果我配置了webpack把bundle放到'public'文件夹中'publicPath'应该包含什么值？目前我有'publicPath：'/'' – SuperManEver

@SuperManEver你应该打开一个新的问题并分享你的webpack配置等。 – enapupe

我已通过添加filename项目对象输出解决了这个问题：

output: { 
path: '/', 
filename: 'bundle.js' 
},

来源

2017-08-29 20:49:37

的WebPack错误bundle.js：1未捕获的SyntaxError：意外令牌<

回答

相关问题