Webpack serveur dev ne peut pas obtenir `http: // localhost/8080/bundle.js`

Question

Compte tenu de cette configuration:

var webpack = require('webpack'); 
const path = require('path') 

module.exports = { 
    entry: "./src/index.js", 
    output: { 
    path: path.join(__dirname, 'dist'), 
    publicPath: path.join(__dirname, 'dist'), 
    filename: "bundle.js" 
    }, 
    devServer: { 
    contentBase: "./dist", 
    // hot: true, 
    } 
} 

Pourquoi pas serveur webpack-dev-server mon application correctement? J'ai 0% de compréhension de localhost, vs localhost/serveur webpack-dev, vs publicPath, vs contentBase, etc. Je connais tous ces chemins, et les clés de configuration sont importantes pour configurer mon projet correctement, mais malgré des heures de lecture sur eux, ils restent aussi confus que quand j'ai commencé. Si je vais à localhost:8080/webpack-dev-server, je vois Get http://localhost:8080/bundle.js net: ERR_ABORTED` dans la console.

Answer 1

ci-dessous sont des règles simples et directs pour webpack & webpack-dev-serveur:

1. output.path: Il doit être un absolute path ou /. Vous pouvez l'obtenir facilement en utilisant path.join
2. output.filename: Ceci doit être le nom du fichier de sortie sans chemin de fichier supplémentaire.
3. devServer.contentBase: Il est l'emplacement physique sur le disque qui est servi dans le répertoire racine de webpack-dev-serveur lorsque vous ouvrez http://localhost:8080

Par convention, nous gardons les deux output.path et devServer.contentBase même . La partie difficile est lorsque vous exécutez webpack cmd, il génère le fichier physique bundle.js.

Mais lorsque vous exécutez webpack-dev-server, NO fichier physique SORTIE est généré, plutôt maintient la sortie générée en mémoire pour éviter fichier-écriture fonctionne à son tour contribue à plus rapide cycle de développement/de débogage.

Donc, toute modification que vous faites dans le fichier src.js or main.js, il va générer la sortie, mais ne l'écrira pas sur le disque et wepack-dev-serveur lit directement à partir de la mémoire.

4. output.publicPath: Ceci est utilisé par webpack, webpack-dev-serveur & autre pour générer la sortie ou servir le faisceau généré plug-in. La valeur par défaut est /.

Il est PATH virtuel et n'a pas besoin d'être présents sur le disque physique. Exemple: nom de l'application finale si plusieurs applications sont hébergées sur le même serveur, telles que /app1, /app2 ou un chemin d'accès CDN externe /CDN-Path.

Il est également utile pour React-Router <BrowserRouter basename='/app1'>

Maintenant, pour consulter le fichier de sortie de faisceau qui est généré & conservé dans la mémoire, vous devez ajouter le output.publicPath dire Virtual Path dans l'URL du navigateur.

L'URL finale pour-serveur webpack-dev sera: http://localhost:8080/<output.publicPath>/<output.filename>

Dans votre cas, soit vous changez le publicPath: path.join(__dirname, 'dist') à publicPath: '/dist' si elle contient des espaces. Vous pouvez le vérifier en imprimant la valeur de path.join(__dirname, 'dist') qui renvoie le chemin absolve [différent sur MacOS & Window system].

http://localhost:8080/dist/bundle.js

Si vous voulez creuser plus profond, alors voici l'URL

https://medium.com/p/webpack-understanding-the-publicpath-mystery-aeb96d9effb1