Conflito: vários ativos são emitidos para o mesmo nome de arquivo

Sou um novato no webpack que quer aprender tudo sobre isso. Eu me deparei com um conflito ao executar meu webpack me dizendo:

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

O que devo fazer para evitar o conflito?

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

não estou muito familiarizado com sua abordagem, então vou mostrar uma maneira comum de ajudá-lo.

Em primeiro lugar, no seu output, você está especificando o filenamepara o app.jsqual faz sentido para mim que a saída ainda seja app.js. Se você quiser torná-lo dinâmico, basta usar "filename": "[name].js".

A [name]parte tornará o nome do arquivo dinâmico para você. Esse é o seu propósito entrycomo objeto. Cada chave será usada como um nome em substituição ao [name].js.

E em segundo lugar, você pode usar o html-webpack-plugin. Você não precisa incluí-lo como um test.

Eu tive o mesmo problema, achei que estava definindo um nome de arquivo de saída estático que estava causando meu problema, no objeto de saída tente o seguinte objeto.

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

Isso faz com que os nomes dos arquivos sejam diferentes e não sejam conflitantes.

EDIT: Uma coisa que descobri recentemente é que você deve usar um hash em vez de chunkhash se estiver usando o recarregamento HMR. Eu não cavei na raiz do problema, mas eu apenas sei que usar chunkhash estava quebrando minha configuração do webpack

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

Deve funcionar bem com HMR então :)

EDITAR julho de 2018:

Um pouco mais de informação sobre isso.

Hash Este é um hash gerado toda vez que o webpack compila, no modo dev, isso é bom para impedir o cache durante o desenvolvimento, mas não deve ser usado para o cache de longo prazo de seus arquivos. Isso substituirá o Hash em cada build do seu projeto.

Chunkhash Se você usar isso em conjunto com um chunk de tempo de execução, então você pode usá-lo para cache de longo prazo, o chunk de tempo de execução verá o que mudou em seu código-fonte e atualizará os hash de chunks correspondentes. Ele não atualizará outros, permitindo que seus arquivos sejam armazenados em cache.

Eu tive exatamente o mesmo problema. O problema parece ocorrer com o file-loader. O erro foi embora quando removi o teste de html e incluí html-webpack-pluginpara gerar um index.htmlarquivo. Este é o meu webpack.config.jsarquivo:

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

O html-webpack-plugin gera um arquivo index.html e injeta automaticamente o arquivo js incluído nele.

Eu tive o mesmo problema e encontrei isso nos documentos.

Se sua configuração criar mais de um único “bloco” (como com vários pontos de entrada ou ao usar plug-ins como CommonsChunkPlugin), você deve usar substituições para garantir que cada arquivo tenha um nome exclusivo.

• [name] é substituído pelo nome do bloco.
• [hash] é substituído pelo hash da compilação.
• [chunkhash] é substituído pelo hash do pedaço.

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

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

Encontrei esse erro em meu ambiente de desenvolvimento local. Para mim, a solução para esse erro foi forçar a reconstrução dos arquivos. Para fazer isso, fiz uma pequena alteração em um dos meus arquivos CSS.

Eu recarreguei meu navegador e o erro foi embora.

O mesmo erro em um projeto Vue.js ao fazer e2e com Karma. A página foi exibida usando um modelo estático index.html com /dist/build.js . E obteve este erro ao executar o Karma.

O comando para emitir Karma usando package.json foi:

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

A configuração de saída em webpack.config.js foi:

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

Minha solução: inspirado na resposta de Evan Burbidge, anexei o seguinte no final de webpack.config.js :

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

E então acabou funcionando tanto para exibição de página quanto para e2e.

Mudei o index.htmlarquivo do /publicdiretório /srcpara corrigir esse problema. (Webpack 5.1.3)