Node JS和Webpack意外的令牌< [英] Node JS and Webpack Unexpected token <
问题描述
我已经开始研究 Node JS 。
所以这是我的文件。
index.html
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="app">
<h1>Hello<h1>
</div>
<script src='assets/bundle.js'></script>
</body>
</html>
app.js
app.js
var http = require("http"),
path = require('path')
fs = require("fs"),
colors = require('colors'),
port = 3000;
var Server = http.createServer(function(request, response) {
var filename = path.join(__dirname, 'index.html');
fs.readFile(filename, function(err, file) {
if(err) {
response.writeHead(500, {"Content-Type": "text/plain"});
response.write(err + "\n");
response.end();
return;
}
response.writeHead(200);
response.write(file);
response.end();
});
});
Server.listen(port, function() {
console.log(('Server is running on http://localhost:'+ port + '...').cyan);
webpack.config.js
webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/assets',
filename: 'bundle.js'
}
}
更新
bundle.js
UPDATE bundle.js
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports) {
alert('Hello');
/***/ }
/******/ ]);
所以，当我点击 app.js 并访问地址时（ localhost：3000）我在控制台中收到错误。
So, when i hit a app.js and visit the address (localhost:3000) i get the error in console.
bundle.js：1 Uncaught SyntaxError：意外的令牌<
bundle.js:1 Uncaught SyntaxError: Unexpected token <
我的JS文件也没有运行。
有人可以建议修理一下吗？
Also my JS file doesnt run. Could someone suggest something to fix it?
提前致谢
推荐答案
您的服务器：
var Server = http.createServer(function(request, response) {
var filename = path.join(__dirname, 'index.html');
...配置为忽略请求中的所有内容，并始终返回 index.html 的内容。
… is configured to ignore everything in the request and always return the contents of index.html.
因此，当浏览器请求 /assets/bundle.js 时，它被赋予 index.html （和错误，因为这不是JavaScript）。
So when the browser requests /assets/bundle.js it is given index.html (and errors because that isn't JavaScript).
您需要注意路径并使用适当的内容类型提供适当的内容。
You need to pay attention to the path and serve up appropriate content, with the appropriate content type.
这可能最好通过找到一个静态文件服务模块来完成（谷歌出现 node-static ）用于Node（或用somet替换Node）喜欢Lighttpd或Apache HTTPD）。
This would probably be best done by finding a static file serving module (Google turns up node-static) for Node (or replacing Node with something like Lighttpd or Apache HTTPD).
如果您想提供动态内容和静态内容，请 Express 是一种受欢迎的选择（并且支持静态文件）。
If you want to serve up dynamic content as well as static content, then Express is a popular choice (and has support for static files).
这篇关于Node JS和Webpack意外的令牌<的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
