Node JS 和 Webpack 意外令牌 <

2024-04-19

我已经开始学习了Node JS.

这是我的文件。

索引.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'
    }
}

UPDATE 捆绑包.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 未捕获的语法错误:意外的标记

我的 JS 文件也无法运行。 有人会建议修复它吗?

提前致谢


您的服务器:

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

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

所以当浏览器请求时/assets/bundle.js它被给予index.html(还有错误,因为那不是 JavaScript)。

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

这可能最好通过找到一个静态文件服务模块来完成(谷歌出现节点静态 https://github.com/cloudhead/node-static)用于 Node(或用 Lighttpd 或 Apache HTTPD 之类的东西替换 Node)。

如果您想提供动态内容和静态内容,那么Express http://expressjs.com/是一个受欢迎的选择(并且有支持静态文件 http://expressjs.com/starter/static-files.html).

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Node JS 和 Webpack 意外令牌 < 的相关文章

随机推荐