web-dev-qa-db-fra.com

Node JS et jeton Webpack inattendu <

J'ai commencé à étudier Node JS .

Voici donc mes fichiers.

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

[~ # ~] mise à jour [~ # ~] ( 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');

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

Ainsi, lorsque je frappe un app.js et que je visite l'adresse (localhost: 3000), j'obtiens l'erreur dans la console.

bundle.js: 1 SyntaxError non capturée: jeton inattendu <

De plus, mon fichier JS ne fonctionne pas. Quelqu'un pourrait-il suggérer quelque chose pour le réparer?

Merci d'avance

javascriptnode.jswebpack
26
user5471583

Votre serveur:

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

… Est configuré pour ignorer tout dans la demande et toujours renvoyer le contenu de index.html.

Ainsi, lorsque le navigateur demande /assets/bundle.js, Il reçoit index.html (Et des erreurs car ce n'est pas du JavaScript).

Vous devez faire attention au chemin d'accès et proposer un contenu approprié, avec le type de contenu approprié.

Il serait probablement préférable de trouver un module de service de fichiers statiques (Google apparaît node-static ) pour Node (ou en remplaçant Node par quelque chose comme Lighttpd ou Apache HTTPD) .

Si vous souhaitez diffuser du contenu dynamique ainsi que du contenu statique, alors Express est un choix populaire (et a prise en charge des fichiers statiques ).

24
Quentin

Peu importe ce qui est demandé par le navigateur, votre serveur retournera toujours le même fichier exact: index.html.

L'erreur que vous voyez est due au fait que votre fichier HTML a une référence à bundle.js, qui, sur demande, est retourné avec le contenu de index.html.

Vous devez utiliser un cadre Web afin de ne pas avoir à vous soucier de ces choses. Par exemple. Express .

6
Dmytro Shevchenko

Utilisateurs express:

Faites savoir au serveur Node = emplacement de vos fichiers statiques

Remarquez cette ligne >> 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...'))

[~ # ~] documents [~ # ~] - https://expressjs.com/en/starter/static-files. html

Bonne chance.

4
Akash

Vous devez servir toutes sortes de fichiers statiques, par exemple 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)
0
Dominic

Ajoutez simplement output: {publicPath: '/',} dans votre fichier webpack.config.js.

0
Mat Watershed