Node JS и Webpack Неожиданный токен <

Я начал изучать 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'
    }
}

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), я получаю сообщение об ошибке в консоли.

bundle.js: 1 Uncaught SyntaxError: Неожиданный токен <

Также мой JS файл не запускается. Может кто-нибудь предложить что-то исправить?

Заранее спасибо

Ответ 1

Ваш сервер:

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

... настроен игнорировать все в запросе и всегда возвращать содержимое index.html.

Поэтому, когда браузер запрашивает /assets/bundle.js, ему присваивается index.html (и ошибки, потому что это не JavaScript).

Вам нужно обратить внимание на путь и подать соответствующий контент с соответствующим типом контента.

Это, вероятно, лучше всего сделать, найдя статический модуль обслуживания файлов (Google включает node-static) для Node (или заменяет Node с чем-то вроде Lighttpd или Apache HTTPD).

Если вы хотите обслуживать динамический контент, а также статический контент, то Express является популярным выбором (и имеет поддержка статических файлов).

Ответ 2

Независимо от того, что запрашивается браузером, ваш сервер всегда будет возвращать тот же самый точный файл: index.html.

Ошибка, которую вы видите, связана с тем, что ваш HTML файл ссылается на bundle.js, который при запросе возвращается с содержимым index.html.

Вы должны использовать веб-фреймворк, чтобы не беспокоиться об этих вещах. Например. Express.

Ответ 3

Экспресс-пользователи:

Пусть сервер 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

Удачи.

Ответ 4

Вам нужно обслуживать все виды статических файлов, например. 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)

Ответ 5

Просто добавьте output: {publicPath: '/',} в ваш файл webpack.config.js.