wake-up-neo.com

Konflikt: Mehrere Assets geben denselben Dateinamen aus

Ich bin ein Webpack-Neuling, der alles darüber erfahren will ... Ich bin auf einen Konflikt gestoßen, als ich mit meinem Webpack angefangen habe: 

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]",
      }
    ]
  }
};

52
Andreasrein

ich bin mit Ihrem Ansatz nicht ganz vertraut, daher zeige ich Ihnen einen gemeinsamen Weg, um Ihnen zu helfen.

Zuallererst spezifizieren Sie auf Ihrem output das filename bis app.js, was für mich Sinn macht, dass die Ausgabe weiterhin app.js ist. Wenn Sie es dynamisieren möchten, verwenden Sie einfach "filename": "[name].js".

Der [name]-Teil macht den Dateinamen für Sie dynamisch. Das ist der Zweck Ihres entry als Objekt. Jeder Schlüssel wird als Name anstelle von [name].js verwendet.

Zweitens können Sie html-webpack-plugin verwenden. Sie müssen es nicht als test angeben. 

64
ickyrr

Ich hatte das gleiche Problem. Ich stellte fest, dass ein statischer Name der Ausgabedatei festgelegt wurde, der mein Problem verursacht. Versuchen Sie das folgende Objekt im Ausgabeobjekt.

output:{
        filename: '[name].js',
        path: __dirname + '/build',
        chunkFilename: '[id].[chunkhash].js'
    },

Dies macht es so, dass die Dateinamen unterschiedlich sind und es nicht kollidiert.

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 in die Wurzel des Problems eingegraben, aber ich weiß nur, dass die Verwendung von chunkhash meine Webpack-Konfiguration zerstört hat

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].[hash:8].js',
  sourceMapFilename: '[name].[hash:8].map',
  chunkFilename: '[id].[hash:8].js'
};

Sollte gut funktionieren mit HMR dann :) 

EDIT Juli 2018:

Ein wenig mehr Informationen dazu. 

Hash .__: Dies ist ein Hash, der bei jedem Compilieren von Webpacks generiert wird. Im Dev-Modus ist dies für die Zwischenspeicherung von Caches während der Entwicklung geeignet, sollte jedoch nicht für das langfristige Cachen von Dateien verwendet werden. Dadurch wird der Hash in 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 die Änderungen in Ihrem Quellcode und aktualisiert die entsprechenden Hash-Chunks. Andere werden nicht aktualisiert, sodass Ihre Dateien zwischengespeichert werden können. 

14
Evan Burbidge

Ich hatte genau das gleiche Problem. Das Problem scheint beim Dateilader zu liegen. Der Fehler wurde behoben, als ich den html-Test entfernte und stattdessen html-webpack-plugin zur Erzeugung einer index.html-Datei hinzufügte. Dies ist meine webpack.config.js-Datei:

var path = require('path');

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
})

module.exports = { 
  entry: {
    javascript: './app/index.js',
    },  

  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },  

  module: {
    rules: [
      {   
        test: /\.jsx?$/,
        exclude: [
          path.resolve(__dirname, '/node_modules/')
        ],  
        loader: 'babel-loader'
      },  
    ]   
  },  

  resolve: {
    extensions: ['.js', '.jsx', '.json']
  },  

  plugins: [HTMLWebpackPluginConfig]
}

Das html-webpack-plugin generiert eine index.html-Datei und fügt die gebündelte js-Datei automatisch ein. 

9
lukastillmann

Ich hatte das gleiche Problem und fand diese in den Dokumenten.

Wenn Ihre Konfiguration mehr als ein einzelnes "Chunk" erstellt (wie bei mehreren Einstiegspunkten oder wenn Sie Plugins wie CommonsChunkPlugin verwenden), sollten Sie Ersetzungen verwenden, um sicherzustellen, dass jede Datei einen eindeutigen Namen hat.

  • [name] wird durch den Namen des Blocks ersetzt.
  • [hash] wird durch den Hash der Kompilierung ersetzt.
  • [chunkhash] wird durch den Hash des Blocks ersetzt.
 output: {
    path:__dirname+'/dist/js',

    //replace filename:'app.js' 
    filename:'[name].js'
}
5
hxin

Dieser Fehler ist in meiner lokalen Entwicklungsumgebung aufgetreten. Für mich bestand die Lösung für diesen Fehler darin, die Dateien zum Neuaufbau zu zwingen. Dazu habe ich eine geringfügige Änderung an einer meiner CSS-Dateien vorgenommen.

Ich habe meinen Browser neu geladen und der Fehler ist verschwunden.

1
MrGood

Der gleiche Fehler in einem Vue.js-Projekt, wenn Sie e2e mit Karma verwenden. Die Seite wurde mit einer statischen Vorlage index.html mit /dist/build.js bedient. Und bekam diesen Fehler beim Karma.

Der Befehl zur Ausgabe von Karma mit package.json lautete:

"test": "cross-env BABEL_ENV=test CHROME_BIN=$(which chromium-browser) karma start --single-run"

Die Ausgabekonfiguration in webpack.config.js war:

 module.exports = {
  output: {
   path: path.resolve(__dirname, './dist'),
   publicPath: '/dist/',
   filename: 'build.js'
  },
  ...
 }

Meine Lösung: Inspiriert von der Antwort von Evan Burbidge fügte ich am Ende von webpack.config.js Folgendes hinzu:

if (process.env.BABEL_ENV === 'test') {
  module.exports.output.filename = '[name].[hash:8].js'
}

Und dann funktionierte es letztendlich für beide Seiten und e2e.

0
Juri Sinitson