webentwicklung-frage-antwort-db.com.de

Webpack-dev-Server wird nicht gebündelt, obwohl die Meldung "Bündel gültig" angezeigt wurde

Ich habe eine grundlegende Reaktionsanwendung mit dem Webpack eingerichtet, aber ich konnte den webpack-dev-server Nicht richtig ausführen.

Ich habe webpack-dev-server Global installiert und versucht, den Befehl Sudo webpack-dev-server --hot Auszuführen, da ein heißes Neuladen erforderlich war.

Das Projekt scheint mit nur webpack cmd gut zu funktionieren. Es wird in meinen Erstellungsordner eingebaut und ich kann es über einen Server zum Laufen bringen, aber es funktioniert nicht mit webpack-dev-server. Aus dem Terminal geht hervor, dass der Build-Prozess ohne Fehler abgeschlossen wurde [webpack: bundle is now VALID.] Und dass er tatsächlich richtig überwacht wird, da er bei jeder Änderung den Build-Prozess auslöst, aber nicht wirklich erstellt wird [tut er nicht] nicht meine bundle.js]. Ich habe versucht, die gesamte Konfiguration zu ändern und konnte das Problem trotzdem nicht beheben.

Es wäre sehr dankbar, wenn jemand helfen könnte.

Es folgt 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
    },
};
26
Karthik Rana

Ich habe das Problem selbst gelöst. Blöd, wie es sich anhört, aber das Problem lag beim publicPath unter dem output -Objekt. Es sollte mit der Eigenschaft path übereinstimmen und nicht nur mit /build/, d.h.

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

In meinem Fall musste ich überprüfen, wo das Webpack die Datei bereitstellt.

Du kannst es sehen: http://localhost:8080/webpack-dev-server

Dann konnte ich meinen Pfad bundle.js sehen> http: // localhost: 8080/dist/bundle.js

Danach habe ich das /dist/bundle.js in meinem index.html <script src="/dist/bundle.js"></script>

Jetzt werden alle Dateiänderungen aktualisiert.

23

der webpack-dev-server versorgt Ihre bundle.js aus dem Speicher. Die Datei wird beim Ausführen nicht generiert. Daher ist bundle.js in diesem Szenario nicht als Datei vorhanden.

Wenn Sie bundle.js nicht verwenden möchten, um beispielsweise die Größe zu optimieren oder Ihre Produktionsbereitstellung zu testen, generieren Sie es mit dem Befehl webpack mit webpack und stellen Sie es im Produktionsmodus bereit.

11
Mark

Dev-Server hält die kompilierte Datei im Speicher, und ich kann nicht direkt darauf zugreifen ... ABER! DIE LÖSUNG ist, dass Sie während der Entwicklung (auch wenn Sie Ihr Projekt auf einem Knotenserver oder localhost ausführen) nicht darauf zugreifen müssen. Verwenden Sie localhost: 8080, um auf Ihre Seite zuzugreifen kann alle Vorteile der Verwendung spüren (live reload!), ABER! Es kompiliert Ihre bundle.js nicht, SO! vor der produktion müssen sie den webpack build befehl manuell ausführen und fertig! dev-server kann die Datei bundle.js nicht kompilieren! Viel Glück!

0
Oleksandr Grin