Conflitto: più risorse vengono emesse nello stesso nome file

Sono un principiante del webpack che vuole imparare tutto al riguardo. Ho riscontrato un conflitto durante l'esecuzione del mio webpack che mi diceva:

ERROR in chunk html [entry] app.js Conflict: Multiple assets emit to the same filename app.js

Cosa devo fare per evitare il conflitto?

Questo è il mio 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]",
      }
    ]
  }
};

non ho abbastanza familiarità con il tuo approccio quindi ti mostrerò un modo comune per aiutarti.

Prima di tutto, sul tuo output, stai specificando il filenamea app.jscui ha senso per me che l'output sarà ancora app.js. Se vuoi renderlo dinamico, usa semplicemente "filename": "[name].js".

La [name]parte renderà dinamico il nome del file. Questo è lo scopo del tuo entrycome oggetto. Ogni chiave verrà utilizzata come nome in sostituzione del file [name].js.

In secondo luogo, puoi usare il file html-webpack-plugin. Non è necessario includerlo come file test.

Ho avuto lo stesso problema, ho scoperto che stava impostando un nome di file di output statico che stava causando il mio problema, nell'oggetto di output prova il seguente oggetto.

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

Questo fa in modo che i nomi dei file siano diversi e non entrino in conflitto.

EDIT: Una cosa che ho scoperto di recente è che dovresti usare un hash invece di chunkhash se usi il ricaricamento HMR. Non ho approfondito la radice del problema, ma so solo che l'uso di chunkhash stava interrompendo la configurazione del mio pacchetto web

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

Dovrebbe funzionare bene con HMR allora :)

EDIT luglio 2018:

Qualche informazione in più su questo.

Hash Questo è un hash generato ogni volta che il webpack viene compilato, in modalità dev è utile per il busting della cache durante lo sviluppo ma non dovrebbe essere usato per la memorizzazione nella cache a lungo termine dei file. Questo sovrascriverà l'hash su ogni build del tuo progetto.

Chunkhash Se si utilizza questo insieme a un blocco di runtime, è possibile utilizzarlo per la memorizzazione nella cache a lungo termine, il blocco di runtime vedrà cosa è cambiato nel codice sorgente e aggiornerà gli hash dei blocchi corrispondenti. Non aggiornerà gli altri consentendo la memorizzazione nella cache dei file.

Ho avuto esattamente lo stesso problema. Il problema sembra verificarsi con il file-loader. L'errore è andato via quando ho rimosso il test html e l'ho incluso html-webpack-pluginper generare un index.htmlfile. Questo è il mio webpack.config.jsfile:

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]
}

Il plugin html-webpack genera un file index.html e vi inietta automaticamente il file js in bundle.

Ho avuto lo stesso problema e ho trovato questi nei documenti.

Se la configurazione crea più di un singolo "blocco" (come con più punti di ingresso o quando si utilizzano plug-in come CommonsChunkPlugin), è necessario utilizzare le sostituzioni per garantire che ogni file abbia un nome univoco.

• [name] è sostituito dal nome del blocco.
• [hash] è sostituito dall'hash della compilation.
• [chunkhash] è sostituito dall'hash del blocco.

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

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

Ho riscontrato questo errore nel mio ambiente di sviluppo locale. Per me, la soluzione a questo errore era forzare la ricostruzione dei file. Per fare ciò, ho apportato una piccola modifica a uno dei miei file CSS.

Ho ricaricato il browser e l'errore è scomparso.

Lo stesso errore in un progetto Vue.js quando si esegue e2e con Karma. La pagina è stata pubblicata utilizzando un template statico index.html con /dist/build.js . E ho ricevuto questo errore durante l'esecuzione di Karma.

Il comando per emettere Karma utilizzando package.json era:

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

La configurazione dell'output in webpack.config.js era:

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

La mia soluzione: ispirato dalla risposta di Evan Burbidge ho aggiunto quanto segue alla fine di webpack.config.js :

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

E poi alla fine ha funzionato sia per il servizio di pagine che per e2e.

Ho cambiato index.htmlfile dalla /publicdirectory a /srcper risolvere questo problema. (Pacchetto web 5.1.3)