个人中心
文章发布
退出
作者热门文章
- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
25
4
我在本地运行服务器并收到错误 bundle.js:1 Uncaught SyntaxError: Unexpected token <在输出 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>
server/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" ]
}
谢谢。
最佳答案
你的 bundle.js src 在你的 script标签错了。它正在返回您的主要 index.html ，这就是您收到该错误的原因 - JS 解析器正在尝试解析 HTML 文件。
您必须在脚本 src 中添加斜杠: <script src="/bundle.js"></script>
如果这不起作用，您必须仔细检查您的 output配置。
关于javascript - Webpack 错误 bundle.js :1 Uncaught SyntaxError: Unexpected token <，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44541165/
25
4
0
这个问题已经有答案了: Difference between $Bundle install and $Bundle update (2 个回答) 已关闭 9 年前。 bundle 之间有什么区别,
我正在尝试加载 Nib ，但不断收到以下错误: -[NSViewController initWithCoder:] could not instantiate an NSViewController
bundle有什么区别& bundler命令？ bundle有什么区别& bundle install ? 如果没有区别，为什么有多个命令做同样的事情？ 最佳答案 可执行文件 bundle & bun
我们有托管在应用程序中的单元测试。要加载测试资源，我们使用:Bundle(for: TestClass.self).path(forResource: "some-file", ofType: "js
我刚刚克隆了一个新的 repo 并尝试运行 bundle install但出现以下错误 Fetching gem metadata from https://abcderepos.net/api/ge
我添加了一个共享框架来在应用程序和 watch 扩展之间共享代码。后来我删除了共享框架，因为它会导致很多问题。我可以 build 并在 iphone 上运行我的应用程序并观看。然而，当我提交到应用商店
这个问题有点类似于 this one ，但不完全是。我有一个 C# 游戏引擎，我正在与一些想要使用我的引擎的人一起工作。最初我设计了引擎，以便所有 Assets 都是外部的——非程序员可以创建艺术、音
我正在尝试使用 OSGi 实现客户端-服务器模型。服务器应用程序是在计算机中运行的 OSGi 框架，客户端应用程序远程连接到其控制台并通过 Java 套接字发送命令并接收正确的响应。每个客户端应用程序
我目前正在将我的 Angular 2 应用程序与 WebPack bundle 在一起。我们仍在快速循环，因此我们不想在构建和应用程序加载过程中增加延迟，而是希望包括很少更改的 Angular 2 U
基本上，我有一个捆绑软件，经常在其他 View 中使用，加上其他js文件，因此我可以在保留其顺序的同时将这些文件添加到现有捆绑软件中吗？ 最佳答案 我到处都在查找它，但找不到将两个捆绑软件合并在一起的
我有一个大约 12GB 的巨大 mercurial 存储库。我需要在另一台机器上克隆它，但是从网络中提取它需要花费很多时间。当我尝试将所有变更集 bundle 到一个 bundle 文件中时，文件的大
我可以使用 Sonata User Bundle 将 FOS 包集成到 sonata Admin 包中。我的登录功能正常。现在我想添加 FOSUserBundle 中的更改密码等功能到 sonata
如果我检查使用 angular-cli 创建的 angular 2 项目的 index.html 文件，我可以看到该页面仅包含 dist 文件夹中的 3 个文件: inline.bundle.js v
我从程序包管理器http://localhost:4502/crx/packmgr/index.jsp中从正在运行的AEM实例下载了一个zip文件。提取后的zip文件包含jcr_root和META-I
已经提出了有关捆绑名称和捆绑显示名称的类似问题，例如: What's the difference between "bundle display name" and "bundle name" in
我正在尝试在 iTunes 上上传我的应用程序。为此，我创建了一个应用程序 ID 并保留了一个包标识符。在我的项目中，我更改了 info.plist 文件中的包标识符。但是，当我尝试在 itunes
我想从 OSGI 包启动 OSGI 包。正如您所看到的，此代码通过从目录部署它来启动 bundle : private void installStartBundle(BundleContext bc
所以这真的让我头疼，我终于放弃了，在这里发表了问题。我正在尝试更新iTune商店中的一个客户端应用程序，并且在上传到App Store时遇到以下错误。 因此，我已经尝试通过两次使用包sid id创建新
我在 typescript 中使用 aurelia，我想避免使用像这样的相对导入路径: import { DialogBox } from '../../resources/elements/dial
有什么区别 ResourceBundle.getBundle("Bundle") 还有这个 ResourceBundle.getBundle("/Bundle") 最佳答案 来自the Java do
我是一名优秀的程序员,十分优秀！