Conflit: plusieurs actifs émettent vers le même nom de fichier

Je suis une recrue webpack qui veut tout savoir à ce sujet. Je suis tombé sur un conflit lors de l'exécution de mon webpack me disant:

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

Que dois-je faire pour éviter le conflit?

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

Je ne connais pas très bien votre approche, je vais donc vous montrer une manière courante de vous aider.

Tout d'abord, sur votre output, vous indiquez le filenameà app.jsqui me fait sens pour que la sortie sera toujours app.js. Si vous voulez le rendre dynamique, utilisez simplement "filename": "[name].js".

La [name]partie rendra le nom de fichier dynamique pour vous. C'est le but de votre entryen tant qu'objet. Chaque clé sera utilisée comme nom en remplacement du [name].js.

Et deuxièmement, vous pouvez utiliser le html-webpack-plugin . Vous n'avez pas besoin de l'inclure en tant que fichier test.

J'ai eu le même problème, j'ai trouvé qu'il définissait un nom de fichier de sortie statique qui causait mon problème, dans l'objet de sortie, essayez l'objet suivant.

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

Cela fait en sorte que les noms de fichiers sont différents et que cela ne se heurte pas.

EDIT: Une chose que j'ai récemment trouvée est que vous devriez utiliser un hachage au lieu de chunkhash si vous utilisez le rechargement HMR. Je n'ai pas creusé la racine du problème mais je sais juste que l'utilisation de chunkhash cassait la configuration de mon webpack

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

Devrait fonctionner correctement avec HMR alors :)

EDIT Juillet 2018:

Un peu plus d'informations à ce sujet.

Hash Il s'agit d'un hachage généré à chaque fois que le webpack se compile, en mode dev, c'est bon pour le contournement du cache pendant le développement mais ne devrait pas être utilisé pour la mise en cache à long terme de vos fichiers. Cela écrasera le hachage sur chaque build de votre projet.

Chunkhash Si vous utilisez ceci en conjonction avec un bloc d'exécution, vous pouvez l'utiliser pour la mise en cache à long terme, le bloc d'exécution verra ce qui a changé dans votre code source et mettra à jour les morceaux de hachage correspondants. Il ne mettra pas à jour les autres, ce qui permet de mettre vos fichiers en cache.

J'ai eu exactement le même problème. Le problème semble se produire avec le file-loader. L'erreur a disparu lorsque j'ai supprimé le test html et inclus à la html-webpack-pluginplace pour générer un index.htmlfichier. Voici mon webpack.config.jsdossier:

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

Le html-webpack-plugin génère un fichier index.html et y injecte automatiquement le fichier js fourni.

J'ai eu le même problème et je les ai trouvés dans les documents.

Si votre configuration crée plus d'un seul «morceau» (comme avec plusieurs points d'entrée ou lorsque vous utilisez des plugins comme CommonsChunkPlugin), vous devez utiliser des substitutions pour vous assurer que chaque fichier a un nom unique.

• [name] est remplacé par le nom du bloc.
• [hash] est remplacé par le hachage de la compilation.
• [chunkhash] est remplacé par le hachage du morceau.

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

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

J'ai rencontré cette erreur dans mon environnement de développement local. Pour moi, la solution à cette erreur était de forcer la reconstruction des fichiers. Pour ce faire, j'ai apporté une modification mineure à l'un de mes fichiers CSS.

J'ai rechargé mon navigateur et l'erreur a disparu.

La même erreur dans un projet Vue.js lors de l'exécution d'e2e avec Karma. La page a été diffusée à l'aide d'un modèle statique index.html avec /dist/build.js . Et j'ai eu cette erreur en exécutant Karma.

La commande pour émettre Karma à l'aide de package.json était:

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

La configuration de sortie dans webpack.config.js était:

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

Ma solution: inspirée de la réponse d'Evan Burbidge, j'ai ajouté ce qui suit à la fin de webpack.config.js :

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

Et puis cela a finalement fonctionné pour le service de page et e2e.

J'ai changé le index.htmlfichier du /publicrépertoire en /srcpour résoudre ce problème. (Webpack 5.1.3)