web-dev-qa-db-fra.com

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

Je suis un débutant de WebPack qui veut tout apprendre à ce sujet… .. Je suis tombé sur un conflit en exécutant 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]",
      }
    ]
  }
};

javascriptnode.jswebpackconfigconflict
52
Andreasrein

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

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

La partie [name] rendra le nom de fichier dynamique pour vous. C'est le but de votre entry en 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 test. 

64
ickyrr

J'ai eu le même problème, j'ai trouvé qu'il s'agissait de définir un nom de fichier de sortie statique qui était à l'origine de mon problème, dans l'objet de sortie, essayez l'objet suivant.

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

Cela rend les noms de fichiers différents et évite les conflits.

EDIT: Une chose que j’ai récemment trouvée, c’est que vous devriez utiliser un hash 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 était en train de casser ma config 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 Il s'agit d'un hachage généré chaque fois que Webpack est compilé. En mode dev, cela est utile pour le contournement du cache pendant le développement mais ne doit pas être utilisé pour la mise en cache à long terme de vos fichiers. Cela écrasera le hachage sur chaque construction de votre projet.

Chunkhash .__ Si vous l'utilisez conjointement avec un morceau d'exécution, vous pouvez l'utiliser pour la mise en cache à long terme, le morceau d'exécution verra ce qui a été modifié dans votre code source et mettra à jour les hachages de morceaux correspondants. Il ne mettra pas à jour les autres, ce qui permettra à vos fichiers d'être mis en cache. 

14
Evan Burbidge

J'ai eu exactement le même problème. Le problème semble se produire avec le chargeur de fichiers. L'erreur a disparu 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]
}

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

9
lukastillmann

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

Si votre configuration crée plusieurs «morceaux» (comme avec plusieurs points d'entrée ou lorsque vous utilisez des plugins tels que CommonsChunkPlugin), vous devez utiliser des substitutions pour vous assurer que chaque fichier a 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 bloc.
 output: {
    path:__dirname+'/dist/js',

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

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.

1
MrGood

La même erreur dans un projet Vue.js lorsque vous utilisez e2e avec Karma. La page a été servie à l'aide d'un modèle statique index.html avec /dist/build.js . Et eu cette erreur en cours d'exécution 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 par 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 les serveurs de pages et e2e.

0
Juri Sinitson