Conflit: plusieurs ressources émettent sous le même nom de fichier

Je ne connais pas très bien votre approche, alors je vais vous montrer un moyen commun de vous aider.

Tout d’abord, sur votre output , vous spécifiez le filename de filename à app.js ce qui est logique pour moi que la sortie sera toujours app.js Si vous voulez le rendre dynamic, utilisez simplement "filename": "[name].js" .

La partie [name] rendra le nom de fichier dynamic pour vous. C’est le but de votre entry en tant qu’object. 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 comme test .

J’ai eu exactement le même problème. Le problème semble se produire avec le chargeur de fichiers. L’erreur s’est dissipée lorsque j’ai supprimé le test HTML et inclus html-webpack-plugin à la place pour générer un fichier index.html. Ceci est mon fichier webpack.config.js :

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

J’ai eu le même problème, j’ai trouvé que c’était la définition d’un nom de fichier de sortie statique qui causait mon problème, dans l’object de sortie, essayez l’object 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 ne se heurtent 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é dans la racine du problème mais je sais juste que l’utilisation de chunkhash brisait ma configuration de webpack

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

Devrait bien fonctionner avec HMR alors 🙂

EDIT juillet 2018:

Un peu plus d’informations à ce sujet.

Hash C’est un hachage généré chaque fois que webpack comstack, en mode dev, il 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 Hash à chaque construction de votre projet.

Chunkhash Si vous l’utilisez conjointement 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 le hachage correspondant. Il ne mettra pas à jour les autres permettant à vos fichiers d’être mis en cache.

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 «morceau» unique (comme avec plusieurs points d’entrée ou lors de l’utilisation de plugins comme CommonsChunkPlugin), vous devez utiliser des substitutions pour vous assurer que chaque fichier porte un nom unique.

• [name] est remplacé par le nom du morceau.
• [hash] est remplacé par le hash 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 consistait à forcer les fichiers à se reconstruire. 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.