Node JS和Webpack意外的令牌<

Question

I've started studing Node JS . 我已经开始研究Node JS了 。

So here is my files. 所以这是我的文件。

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'
    }
}

UPDATE bundle.js 更新 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');

/***/ }
/******/ ]);

So, when i hit a app.js and visit the address (localhost:3000) i get the error in console. 所以，当我点击app.js并访问地址（localhost：3000）时，我在控制台中收到错误。

bundle.js:1 Uncaught SyntaxError: Unexpected token < bundle.js：1 Uncaught SyntaxError：意外的令牌<

Also my JS file doesnt run. 我的JS文件也没有运行。 Could someone suggest something to fix it? 有人可以建议解决一些问题吗？

Thanks in advance 提前致谢

Answer 1

Your server: 你的服务器：

 var Server = http.createServer(function(request, response) { var filename = path.join(__dirname, 'index.html');

… is configured to ignore everything in the request and always return the contents of index.html . ...配置为忽略请求中的所有内容，并始终返回index.html的内容。

So when the browser requests /assets/bundle.js it is given index.html (and errors because that isn't JavaScript). 因此，当浏览器请求/assets/bundle.js它会被赋予index.html （而错误因为它不是JavaScript）。

You need to pay attention to the path and serve up appropriate content, with the appropriate content type. 您需要注意路径并使用适当的内容类型提供适当的内容。

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). 这可能最好通过为Node找到一个静态文件服务模块（Google打开节点静态）（或用Lighttpd或Apache HTTPD替换Node）来完成。

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 ). 如果您想提供动态内容以及静态内容，那么Express是一种流行的选择（并且支持静态文件）。

Answer 2

No matter what is requested by the browser, your server will always return the same exact file: index.html . 无论浏览器请求什么，您的服务器将始终返回相同的文件： index.html 。

The error you are seeing is because your HTML file has a reference to bundle.js , which, when requested, is returned with the contents of index.html . 您看到的错误是因为您的HTML文件引用了bundle.js ，当被请求时，会返回index.html的内容。

You should use a web framework so that you don't have to worry about these things. 您应该使用Web框架，这样您就不必担心这些事情。 Eg Express . 如快递。

Answer 3

Express Users : 快递用户：

Let the Node server know the location of your static files **让节点服务器知道静态文件的位置**

Notice this line >> `app.use(express.static('public'))` 注意这一行>> `app.use(express.static('public'))`

//server.js
const express = require('express')
const app = express()
// serve static assets from the public folder in project root
app.use(express.static('public')) 
//
app.listen(8080, () => console.log('listening...'))

DOCS - https://expressjs.com/en/starter/static-files.html DOCS - https://expressjs.com/en/starter/static-files.html

Good Luck. 祝好运。

Answer 4

You need to serve all kinds of static files, eg https://github.com/expressjs/serve-static#serve-files-with-vanilla-nodejs-http-server 您需要提供各种静态文件，例如https://github.com/expressjs/serve-static#serve-files-with-vanilla-nodejs-http-server

var finalhandler = require('finalhandler')
var http = require('http')
var serveStatic = require('serve-static')

// Serve up public/ftp folder
var serve = serveStatic(__dirname)

// Create server
var server = http.createServer(function(req, res){
  var done = finalhandler(req, res)
  serve(req, res, done)
})

// Listen
server.listen(process.ENV.port || 3000)

Answer 5

只需在webpack.config.js文件中添加output: {publicPath: '/',} 即可。

Node JS和Webpack意外的令牌<

问题描述

5 个解决方案

解决方案1
24 已采纳 2015-10-21 13:14:32

解决方案2
6 2015-10-21 13:14:25

解决方案3
4 2016-12-29 04:11:14

Express Users : 快递用户：

Let the Node server know the location of your static files **让节点服务器知道静态文件的位置**

Notice this line >> `app.use(express.static('public'))` 注意这一行>> `app.use(express.static('public'))`

解决方案4
0 2015-10-21 13:20:33

解决方案5
0 2019-04-20 19:57:26

Node JS和Webpack意外的令牌<

问题描述

5 个解决方案

解决方案1 24 已采纳 2015-10-21 13:14:32

解决方案2 6 2015-10-21 13:14:25

解决方案3 4 2016-12-29 04:11:14

Express Users : 快递用户：

Let the Node server know the location of your static files 让节点服务器知道静态文件的位置

Notice this line >> app.use(express.static('public')) 注意这一行>> app.use(express.static('public'))

解决方案4 0 2015-10-21 13:20:33

解决方案5 0 2019-04-20 19:57:26

解决方案1
24 已采纳 2015-10-21 13:14:32

解决方案2
6 2015-10-21 13:14:25

解决方案3
4 2016-12-29 04:11:14

Let the Node server know the location of your static files **让节点服务器知道静态文件的位置**

Notice this line >> `app.use(express.static('public'))` 注意这一行>> `app.use(express.static('public'))`

解决方案4
0 2015-10-21 13:20:33

解决方案5
0 2019-04-20 19:57:26