Node JS和Webpack意外令牌<

Node JS and Webpack Unexpected token <

本文关键字：令牌 意外 JS Webpack Node      更新时间：2023-09-26

我已经开始学习Node JS。

这是我的文件。

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 

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 

module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname + '/assets',
        filename: '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');
/***/ }
/******/ ]);

所以，当我点击app.js并访问地址(localhost:3000)时，我在控制台中得到错误。

bundle.js:1 Uncaught SyntaxError: Unexpected token <</p>

也我的JS文件不运行。谁能给点建议解决这个问题?

Thanks in advance

服务器:

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

…被配置为忽略请求中的所有内容，并始终返回index.html的内容。

因此，当浏览器请求/assets/bundle.js时，它被给定index.html(和错误，因为这不是JavaScript)。

您需要注意路径，并使用适当的内容类型提供适当的内容。

最好是为Node找到一个静态文件服务模块(Google提供Node -static)(或者用像Lighttpd或Apache HTTPD这样的东西替换Node)。

如果您想提供动态内容和静态内容，那么Express是一个流行的选择(并且支持静态文件)。

无论浏览器请求什么，您的服务器总是返回相同的文件:index.html .

您看到的错误是因为您的HTML文件有一个对bundle.js的引用，当请求时，返回index.html的内容。

你应该使用一个web框架，这样你就不必担心这些事情。例如表达。

Express Users:

让Node服务器知道静态文件的位置

注意这一行>>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

好运。

您需要提供各种静态文件，例如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)

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

相关文章：