Node JS e token imprevisto Webpack <

Ho iniziato a studiare Node JS .

Quindi ecco i miei file.

index.html

     

Hello

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

AGGIORNA 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'); /***/ } /******/ ]); 

Quindi, quando raggiungo un app.js e visito l’indirizzo (localhost: 3000) ottengo l’errore nella console.

bundle.js: 1 Uncaught SyntaxError: Token imprevisto <

Anche il mio file JS non funziona. Qualcuno potrebbe suggerire qualcosa per risolverlo?

Grazie in anticipo

Il tuo server:

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

… è configurato per ignorare tutto nella richiesta e restituire sempre il contenuto di index.html .

Quindi quando il browser richiede /assets/bundle.js viene dato index.html (ed errori perché non è JavaScript).

È necessario prestare attenzione al percorso e pubblicare contenuti appropriati, con il tipo di contenuto appropriato.

Probabilmente sarebbe meglio farlo trovando un modulo di file serving statico (Google diventa nodo-statico ) per Nodo (o sostituendo il nodo con qualcosa come Lighttpd o Apache HTTPD).

Se desideri pubblicare contenuti dinamici e contenuti statici, Express è una scelta popolare (e supporta i file statici ).

Indipendentemente da quanto richiesto dal browser, il server restituirà sempre lo stesso file esatto: index.html .

L’errore che stai vedendo è perché il tuo file HTML ha un riferimento a bundle.js , che, quando richiesto, viene restituito con il contenuto di index.html .

Dovresti utilizzare un framework web in modo da non doverti preoccupare di queste cose. Es. Espresso

Utenti Express:

Consenti al server Node di conoscere la posizione dei tuoi file statici

Nota questa linea >> 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...')) 

DOCUMENTIhttps://expressjs.com/en/starter/static-files.html

In bocca al lupo.

È necessario servire tutti i tipi di file statici, ad esempio https://github.com/expressjs/serve-static#serv-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)