javascript - Conflicto: Varios recursos se generan con el mismo nombre de archivo

Soy un principiante en webpack que quiere aprender todo sobre él. Me encontré con un conflicto al ejecutar mi webpack que me decía:

ERROR en el fragmento html [entrada] app.js Conflicto: Múltiples recursos se emiten al mismo nombre de archivo app.js

¿Qué debo hacer para evitar el conflicto?

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

Respuesta #1

No estoy muy familiarizado con tu enfoque, así que te mostraré una manera común de ayudarte.

En primer lugar, en tu output, estás especificando el filename como app.js, lo cual tiene sentido para mí, ya que la salida seguirá siendo app.js. Si quieres hacerlo dinámico, entonces simplemente usa "filename": "[name].js".

La parte [name] hará que el nombre del archivo sea dinámico para ti. Ese es el propósito de tu entry como un objeto. Cada clave se usará como un nombre en lugar de [name].js.

Y segundo, puedes usar el html-webpack-plugin. No necesitas incluirlo como un test.

Respuesta #2

Tuve el mismo problema, descubrí que era el hecho de configurar un nombre de archivo de salida estático lo que estaba causando mi problema, en el objeto de salida prueba el siguiente objeto.

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

Esto hace que los nombres de los archivos sean diferentes y no choquen.

EDITAR: Una cosa que he descubierto recientemente es que deberías usar un hash en lugar de chunkhash si usas recarga HMR. No he investigado la raíz del problema, pero solo sé que usar chunkhash estaba rompiendo mi configuración de webpack

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

Entonces debería funcionar bien con HMR :)

EDICIÓN julio 2018:

Un poco más de información sobre esto.

Hash Este es un hash generado cada vez que webpack compila; en el modo de desarrollo esto es útil para evitar el caché durante el desarrollo, pero no debería usarse para el almacenamiento en caché a largo plazo de tus archivos. Esto sobrescribirá el Hash en cada compilación de tu proyecto.

Chunkhash Si usas esto junto con un chunk de tiempo de ejecución, entonces puedes usarlo para el almacenamiento en caché a largo plazo; el chunk de tiempo de ejecución verá qué ha cambiado en tu código fuente y actualizará los hash de los chunks correspondientes. No actualizará otros, lo que permite que tus archivos se almacenen en caché.

Respuesta #3

Tuve el mismo problema después de actualizar a Webpack 5. Mi problema fue causado por el copy-webpack-plugin.

A continuación se muestra el patrón original para ignorar un archivo especificado, funciona con Webpack 4, pero arroja un error con Webpack 5.

ERROR en Conflicto: Múltiples recursos emiten contenido diferente al mismo nombre de archivo default.hbs

  plugins: [
   new CopyPlugin({
      patterns: [
        {
          from: "./src/academy/templates",
          globOptions: {
            ignore: ["default.hbs"]
          }
        },
      ]
    }),
   ],

Para arreglar el error:

  plugins: [
   new CopyPlugin({
      patterns: [
        {
          from: "./src/academy/templates",
          globOptions: {
            ignore: ["**/default.hbs"]
          }
        },
      ]
    }),
   ],

Al no ignorar el archivo especificado, el default.hbs (también conocido como index.html) se copió dos veces en el directorio de compilación (también conocido como /disk), lo que resultó efectivamente en que Webpack intentara insertar múltiples recursos en el "mismo" nombre de archivo (duplicado).

Respuesta #4

Tuve exactamente el mismo problema. El problema parece ocurrir con el file-loader. El error desapareció cuando eliminé la prueba html e incluí html-webpack-plugin en su lugar para generar un archivo index.html. Este es mi archivo 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]
}

El html-webpack-plugin genera un archivo index.html e inyecta automáticamente el archivo js empaquetado en él.