Webpack-dev-server nicht bündeln auch nach dem anzeigen Bundle gültige Nachricht

Question

Ich habe eine grundlegende reagieren Anwendung mit Webpack, aber ich konnte nicht die webpack-dev-server läuft ordnungsgemäß.

Ich habe webpack-dev-server global installiert und habe versucht, den Befehl sudo webpack-dev-server --hot auszuführen, da das Warmladen erforderlich war.

Das Projekt scheint mit nur webpack cmd gut zu funktionieren. Es baut in meinen Build-Ordner und ich kann es über einige Server arbeiten, aber es funktioniert nicht mit webpack-dev-server. Vom Terminal ist klar, dass der Build-Prozess abgeschlossen ist, ohne dass ein Fehler geworfen wird [webpack: bundle is now VALID.] und es tatsächlich richtig beobachtet, weil es bei jeder Änderung den Build-Prozess auslöst, aber es wird nicht wirklich gebaut [es dient nicht meinem Bundle .js]. Ich habe versucht, die gesamte Konfiguration zu ändern und konnte das Problem immer noch nicht lösen.

Es wäre sehr zu schätzen, wenn jemand helfen kann.

Folgendes ist meine Datei webpack.config.js.

var path = require('path'); 

module.exports = { 
    devtool: '#inline-source-map"', 

    watch: true, 
    colors: true, 
    progress: true, 

    module: { 
     loaders: [{ 
      loader: "babel", 
      include: [ 
       path.resolve(__dirname, "src"), 
      ], 
      test: /\.jsx?$/, 
      query: { 
       plugins: ['transform-runtime'], 
       presets: ['es2015', 'react', 'stage-0'], 
      } 
     }, { 
      loader: 'style!css!sass', 
      include: path.join(__dirname, 'src'), 
      test: /\.scss$/ 
     }] 
    }, 

    plugins: [], 
    output: { 
     path: path.join(__dirname, 'build/js'), 
     publicPath: '/build/', 
     filename: '[name].js' 
    }, 
    entry: { 
     bundle: [ 
      './src/index.js' 
     ] 
    }, 

    devServer: { 
     contentBase: "./", 
     inline: true, 
     port: 8080 
    }, 
}; 

Answer 1

Ich habe das Problem von mir selbst gelöst. Dumm wie es klingt, aber das Problem war mit dem publicPath unter dem output Objekt. Es sollte statt nur /build/, das heißt

output: { 
    path: path.join(__dirname, 'build/js'), 
    publicPath: '/build/js', // instead of publicPath: '/build/' 
    filename: '[name].js' 
}, 

Answer 2

webpack-dev-server versorgt Ihre bundle.js aus dem Speicher. Es wird nicht die Datei generieren, wenn Sie es ausführen. Daher ist bundle.js in diesem Szenario nicht als Datei vorhanden.

Wenn Sie bundle.js verwenden möchten, um beispielsweise seine Größe zu optimieren oder Ihre Produktionsbereitstellung zu testen, generieren Sie es mit dem webpack-Befehl webpack und führen Sie es im Produktionsmodus aus.

Answer 3

In meinem Fall die path Eigenschaft übereinstimmen musste ich prüfen, wo die webpack die Datei dient.

Sie können es sehen: http://localhost:8080/webpack-dev-server

Dann könnte ich meine bundle.js Weg sehen>http://localhost:8080/dist/bundle.js

Danach habe ich verwendet, dass /dist/bundle.js in meiner index.html <script src="/dist/bundle.js"></script>

Jetzt frischt es ein Dateiänderungen.