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

Question

Je suis un débutant de WebPack qui veut tout apprendre à ce sujet. J'ai rencontré un conflit lors de l'exécution de mon Webpack en 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?

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

Answer 1

je ne suis pas assez familier avec votre approche, donc je vais vous montrer une voie commune pour vous aider.

Tout d'abord, sur votre output, vous spécifiez l' filename de app.js qui fait sens pour moi, que la sortie sera toujours app.js. Si vous voulez le rendre dynamique, alors il suffit d'utiliser "filename": "[name].js".

L' [name] partie fera le nom de fichier dynamique pour vous. C'est le but de votre entry comme un objet. Chaque clé sera utilisé comme un nom en remplacement de l' [name].js.

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

Answer 2

J'ai eu le même problème, j'ai trouvé qu'il était de réglage statique de sortie nom du fichier qui était la cause de mon problème, à la sortie de l'objet essayer de l'objet suivant.

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

Ce qu'il fait en sorte que les noms de fichier sont différents et il ne rentrera pas en conflit.

EDIT: Une chose que j'ai récemment découvert que vous devez utiliser une table de hachage au lieu de chunkhash si vous utilisez HMR rechargement. Je n'ai pas creusé dans la racine du problème, mais je sais juste que l'utilisation de chunkhash était en rupture avec ma config 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 sur cette.

De hachage C'est un hash généré chaque fois que webpack compile, en dev mode c'est bon pour le contournement du cache pendant le développement, mais ne doit pas être utilisé à long terme de la mise en cache de vos fichiers. Cela va écraser le Hachage sur chaque build de votre projet.

Chunkhash Si vous l'utilisez en conjonction avec un runtime morceau que vous pouvez utiliser pour une longue durée de mise en cache, le moteur d'exécution morceau va voir ce qui a changé dans votre code source et de mettre à jour le correspondant de morceaux de hachage. Il ne sera pas mise à jour d'autres de permettre à vos fichiers à mettre en cache.

Answer 3

J'ai eu exactement le même problème. Le problème semble se produire avec le fichier loader. L'erreur a disparu lorsque j'ai enlevé le code html de test et inclus html-webpack-plugin au lieu de générer un index.html fichier. C'est mon webpack.config.js le fichier:

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 index.html fichier et automatiquement injecte de l'livré fichier js.

Answer 4

J'ai eu le même problème, et j'ai trouvé ces dans les documents.

Si votre configuration crée plus qu'un seul "bloc" (comme avec de multiples points d'entrée ou lors de l'utilisation de plugins comme CommonsChunkPlugin), vous devez utiliser des substitutions pour s'assurer que chaque fichier a un nom unique.

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

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

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

Answer 5

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 est partie.