Conflit: de Multiples atouts émettent le même nom de fichier

Je suis un webpack recrue qui veut tout savoir sur elle.
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?

C'est mon webpack.config.js:

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

  • ce que je veux savoir est ce que l'outil écrit un message d'erreur tel que "le Conflit: de Multiples atouts émettent le même nom de fichier slots.js". Pourquoi ne pas mettre de la putain de noms de conflit actif dans cette erreur plutôt que de forcer l'utilisateur à suivre???
InformationsquelleAutor Andreasrein | 2017-02-09
  1. 71

    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 le filename à 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".

    La [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 la [name].js.

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

    • il serait bien si cela avait un échantillon correspondant à l'original
    InformationsquelleAutor ickyrr
  2. 17

    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 a été la rupture de mon webpack config

    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 🙂

    MODIFIER 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 de l'. Il ne sera pas mise à jour d'autres de permettre à vos fichiers à mettre en cache.

    • Faire l'œuvre de dieu.
    InformationsquelleAutor Evan Burbidge
  3. 9

    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 fichier:

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

    • Cela a résolu mon problème. Il semble que vous pouvez avoir la HTMLWebpackPlugin, ou le html-loader, mais pas les deux.
    InformationsquelleAutor lukastillmann
  4. 5

    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 la valeur de hachage de la compilation.
    • [chunkhash] est remplacé par la valeur de hachage de la partie.
     output: {
    path:__dirname+'/dist/js',

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

    J'ai rencontré cette erreur dans mon local environnement de dev. Pour moi, la solution à cette erreur a été de forcer les fichiers de reconstruire. Pour ce faire, j'ai fait un changement mineur à l'un de mes fichiers CSS.

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

    • Voulais utiliser asyncComponent. Ensuite, j'ai trouvé ce problème avec un fichier qui était avant dans d'autres composants. Simple redémarrage de fil résolu. Merci!
    InformationsquelleAutor MrGood
  6. 0

    La même erreur dans un Vue.js projet lorsque vous faites e2e avec le Karma. La page a été servi à l'aide d'un modèle statique index.html avec /dist/build.js. Et a obtenu cette erreur d'exécution de Karma.

    La commande à la question de Karma, à l'aide de paquet.json était:

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

    La configuration de la sortie en webpack.config.js était:

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

    Ma solution: inspiré par le Evan Burbidge la réponse que j'ai ajouté la ligne suivante à la fin de webpack.config.js:

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

    Et puis finalement il a travaillé pour deux page de servir et e2e.

    InformationsquelleAutor Juri Sinitson