Konflikt: Mehrere Assets werden unter demselben Dateinamen ausgegeben

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

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

Zunächst geben outputSie auf Ihrer Seite an , filenamefür app.jswas es für mich Sinn macht, dass die Ausgabe weiterhin erfolgt app.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 dir entryals 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ßen test.

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.

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

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

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

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.

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.jsDatei:

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.

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

Wenn Ihre Konfiguration mehr als einen einzelnen "Block" erstellt (wie bei mehreren Einstiegspunkten oder bei Verwendung von Plugins wie CommonsChunkPlugin), 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 Chunks ersetzt.

 output: {
    path:__dirname+'/dist/js',

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

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.

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:

"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 habe ich am Ende von webpack.config.js Folgendes angehängt :

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

Und dann funktionierte es schließlich sowohl für das Seiten-Serving als auch für e2e.