javascript - tag - title html w3schools

Conflicto: múltiples activos emiten al mismo nombre de archivo

Question

Soy un novato webpack que quiere aprender todo al respecto. Encontré un conflicto al ejecutar mi paquete web diciéndome:

ERROR in chunk html [entry] app.js Conflict: Multiple assets emit to the same filename 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]",
      }
    ]
  }
};

Answer 1

El mismo error en un proyecto Vue.js al hacer e2e con Karma. La página se sirvió utilizando una plantilla estática index.html con /dist/build.js . Y obtuve este error ejecutando Karma.

El comando para emitir Karma usando package.json fue:

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

La configuración de salida en webpack.config.js fue:

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

Mi solución: inspirada en la respuesta de Evan Burbidge, agregué lo siguiente al final de webpack.config.js :

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

Y luego finalmente funcionó tanto para la publicación de páginas como para e2e.

Answer 2

Encontré este error en mi entorno de desarrollo local. Para mí, la solución a este error fue forzar la reconstrucción de los archivos. Para hacer esto, hice un cambio menor en uno de mis archivos CSS.

Recargué mi navegador y el error desapareció.

Answer 3

No estoy muy familiarizado con su enfoque, así que le mostraré una forma común de ayudarlo.

En primer lugar, en su output , está especificando el filename del filename a app.js que tiene sentido para mí que la salida seguirá siendo app.js Si desea que sea dinámico, simplemente use "filename": "[name].js" .

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

Y segundo, puede usar el html-webpack-plugin . No necesita incluirlo como test .

Answer 4

Tuve el mismo problema y los encontré en los documentos.

Si su configuración crea más de un "fragmento" (como con múltiples puntos de entrada o cuando utiliza complementos como CommonsChunkPlugin), debe usar sustituciones para asegurarse de que cada archivo tenga un nombre único.

• [name] se reemplaza por el nombre del fragmento.
• [hash] se reemplaza por el hash de la compilación.
• [chunkhash] se reemplaza por el hash del fragmento.

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

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

Answer 5

Tuve el mismo problema, descubrí que estaba configurando un nombre de archivo de salida estático que estaba causando mi problema, en el objeto de salida intente 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 choque.

EDITAR: Una cosa que he encontrado recientemente es que debe usar un hash en lugar de chunkhash si usa la recarga HMR. No he profundizado en la raíz del problema, pero solo sé que usar chunkhash estaba rompiendo la configuración de mi paquete web

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

Debería funcionar bien con HMR entonces :)

EDITAR julio de 2018:

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

Hash Este es un hash generado cada vez que se compila webpack, en modo dev esto es bueno para el almacenamiento en caché durante el desarrollo, pero no debe usarse para el almacenamiento en caché a largo plazo de sus archivos. Esto sobrescribirá el hash en cada compilación de su proyecto.

Chunkhash Si usa esto junto con un fragmento de tiempo de ejecución, puede usarlo para el almacenamiento en caché a largo plazo, el fragmento de tiempo de ejecución verá lo que ha cambiado en su código fuente y actualizará el hash de fragmentos correspondiente. No actualizará otros permitiendo que sus archivos se almacenen en caché.

Answer 6

Tuve exactamente el mismo problema. El problema parece ocurrir con el cargador de archivos. El error desapareció cuando eliminé la prueba html e incluí html-webpack-plugin 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]
}

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