Ich bin ein Webpack-Neuling, der alles darüber erfahren möchte. Beim Ausführen meines Webpacks bin ich auf einen Konflikt gestoßen, der mir sagte:
ERROR in chunk html [entry]
app.js
Conflict: Multiple assets emit to the same filename app.js
Was soll ich tun, um den Konflikt zu vermeiden?
Dies ist meine webpack.config.js:
module.exports = {
context: __dirname + "/app",
entry: {
'javascript': "./js/app.js",
'html': "./index.html",
},
output: {
path: __dirname + "/dist",
filename: "app.js",
},
resolve: {
extensions: ['.js', '.jsx', '.json']
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ["babel-loader"]
},
{
test: /\.html$/,
loader: "file-loader?name=[name].[ext]",
}
]
}
};
Conflict: Multiple chunks emit assets to the same filename main.css (chunks main and main)
Antworten:
Ich bin mit Ihrem Ansatz nicht ganz vertraut, daher zeige ich Ihnen einen gemeinsamen Weg, um Ihnen zu helfen.
Zunächst geben
output
Sie auf Ihrer Seite an ,filename
fürapp.js
was es für mich Sinn macht, dass die Ausgabe weiterhin erfolgtapp.js
. Wenn Sie es dynamisch machen möchten, verwenden Sie einfach"filename": "[name].js"
.Das
[name]
Teil macht den Dateinamen für Sie dynamisch. Das ist der Zweck von direntry
als Objekt. Jeder Schlüssel wird als Name anstelle des Schlüssels verwendet[name].js
.Und zweitens können Sie die verwenden
html-webpack-plugin
. Sie müssen es nicht als einschließentest
.quelle
Ich hatte das gleiche Problem. Ich stellte fest, dass ein statischer Name der Ausgabedatei festgelegt wurde, der mein Problem verursachte. Versuchen Sie im Ausgabeobjekt das folgende Objekt.
Dadurch werden die Dateinamen unterschiedlich und es kommt nicht zu Konflikten.
EDIT: Eine Sache, die ich kürzlich gefunden habe, ist, dass Sie einen Hash anstelle von Chunkhash verwenden sollten, wenn Sie HMR Reloading verwenden. Ich habe mich nicht mit der Wurzel des Problems befasst, aber ich weiß nur, dass die Verwendung von Chunkhash meine Webpack-Konfiguration beschädigt hat
Sollte dann gut mit HMR funktionieren :)
EDIT Juli 2018:
Ein bisschen mehr Informationen dazu.
Hash Dies ist ein Hash, der jedes Mal generiert wird, wenn Webpack kompiliert wird. Im Dev-Modus ist dies gut für Cache-Busting während der Entwicklung, sollte aber nicht für das langfristige Caching Ihrer Dateien verwendet werden. Dadurch wird der Hash bei jedem Build Ihres Projekts überschrieben.
Chunkhash Wenn Sie dies in Verbindung mit einem Laufzeit-Chunk verwenden, können Sie es für das langfristige Caching verwenden. Der Laufzeit-Chunk erkennt, was sich in Ihrem Quellcode geändert hat, und aktualisiert die entsprechenden Chunks-Hashs. Andere werden nicht aktualisiert, sodass Ihre Dateien zwischengespeichert werden können.
quelle
Ich hatte genau das gleiche Problem. Das Problem scheint beim File-Loader aufzutreten. Der Fehler verschwand, als ich den HTML-Test entfernte und stattdessen das HTML-Webpack-Plugin einfügte, um eine index.html-Datei zu generieren. Das ist meine
webpack.config.js
Datei:Das HTML-Webpack-Plugin generiert eine index.html-Datei und fügt die gebündelte js-Datei automatisch ein.
quelle
HTMLWebpackPlugin
oder das haben könnenhtml-loader
, aber nicht beide.Ich hatte das gleiche Problem und fand es in den Dokumenten.
quelle
Ich habe diesen Fehler in meiner lokalen Entwicklungsumgebung festgestellt. Für mich bestand die Lösung für diesen Fehler darin, die Dateien neu zu erstellen. Zu diesem Zweck habe ich eine geringfügige Änderung an einer meiner CSS-Dateien vorgenommen.
Ich habe meinen Browser neu geladen und der Fehler ist verschwunden.
quelle
Der gleiche Fehler in einem Vue.js-Projekt, wenn e2e mit Karma ausgeführt wird. Die Seite wurde mithilfe einer statischen Vorlage index.html mit /dist/build.js bereitgestellt . Und habe diesen Fehler beim Ausführen von Karma.
Der Befehl zum Ausgeben von Karma mit package.json lautete:
Die Ausgabekonfiguration in webpack.config.js war:
Meine Lösung: Inspiriert von der Antwort von Evan Burbidge habe ich am Ende von webpack.config.js Folgendes angehängt :
Und dann funktionierte es schließlich sowohl für das Seiten-Serving als auch für e2e.
quelle