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
},
};
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'
},
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.
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.
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!