Soy un novato de webpack que quiere aprender todo al respecto. Encontré un conflicto al ejecutar mi paquete web que me decía:
ERROR en el fragmento html [entrada] app.js Conflicto: varios activos 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]", } ] } };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 nombre de filename en app.js , lo que tiene sentido para mí, ya que la salida seguirá siendo app.js Si desea hacerlo dinámico, simplemente use "filename": "[name].js" .
La parte [name] hará que el nombre del archivo sea dinámico para usted. Ese es el propósito de su entry como objeto. Cada clave se usará como un nombre en reemplazo de [name].js .
Y segundo, puede usar el html-webpack-plugin . No es necesario incluirlo como una test .
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 con 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 entren en conflicto.
EDITAR: una cosa que descubrí 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 el paquete web, en el modo de desarrollo, esto es bueno para la prevención de 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á qué ha cambiado en su código fuente y actualizará los hash de fragmentos correspondientes. No actualizará a otros permitiendo que sus archivos se almacenen en caché.
Tuve exactamente el mismo problema. El problema parece ocurrir con el file-loader . El error desapareció cuando eliminé la prueba 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 complemento html-webpack genera un archivo index.html y automáticamente inyecta el archivo js incluido en él.