Konflikt: wiele zasobów emituje tę samą nazwę pliku

Question

Jestem żółtodziobem, który chce się o tym dowiedzieć. natknąłem konfliktu podczas uruchamiania mojego WebPACK mówi mi:

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

Co należy zrobić, aby uniknąć konfliktu?

To jest moje 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

nie jestem dość zaznajomieni z podejściem więc pokażę wam wspólną drogę, aby ci pomóc.

Przede wszystkim na output, jesteś określające filename do app.js który ma sens dla mnie, że wyjście będzie nadal app.js. Jeśli chcesz, aby był dynamiczny, po prostu użyj "filename": "[name].js".

Część [name] spowoduje, że nazwa pliku będzie dynamiczna dla Ciebie. To jest celem twojego entry jako obiektu. Każdy klucz będzie używany jako nazwa zastępująca nazwę [name].js.

Po drugie, można użyć html-webpack-plugin. Nie musisz uwzględniać go jako test.

Answer 2

Miałem dokładnie ten sam problem. Problem wydaje się występować w przypadku programu ładującego pliki. Błąd zniknął, gdy usunąłem test html i dodałem wtyczkę html-webpack, aby wygenerować plik index.html. To jest mój webpack.config.js file:

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 generuje plik index.html i automatycznie wstrzykuje plik js dołączonego do niego.

Answer 3

Miałem ten sam problem, stwierdziłem, że to ustawienie statycznej nazwy pliku wyjściowego, który był przyczyną mojego problemu, w obiekcie wyjściowym wypróbuj następujący obiekt.

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

Dzięki temu nazwy plików są różne i nie kolidują ze sobą.

EDYCJA: Jedną z rzeczy, które niedawno znalazłem, jest to, że powinieneś użyć skrótu zamiast chunkhash, jeśli używasz przeładowania HMR. Ja nie wbiły się w katalogu głównym problemem, ale ja po prostu wiem, że za pomocą chunkhash łamał moje WebPACK config

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

powinny działać prawidłowo z HMR następnie :)

Answer 4

miałem ten sam problem, a ja znalazłem je w dokumentach.

Jeśli konfiguracja tworzy więcej niż jednego „kawałka” (podobnie jak w przypadku wielu punktów wejścia lub przy użyciu wtyczek jak CommonsChunkPlugin), należy użyć podstawienia aby upewnić się, że każdy plik ma niepowtarzalną nazwę.

• [name] zostaje zastąpiony przez nazwę kawałka.
• [hash] zostaje zastąpione skrótem kompilacji.
• [chunkhash] zostaje zastąpione przez skrót bloku.

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

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