Jestem debiutantem webpacka, który chce się wszystkiego dowiedzieć. Napotkałem konflikt podczas uruchamiania pakietu internetowego, który mówi mi:
ERROR in chunk html [entry]
app.js
Conflict: Multiple assets emit to the same filename app.js
Co powinienem zrobić, aby uniknąć konfliktu?
To jest mój 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]",
}
]
}
};
Conflict: Multiple chunks emit assets to the same filename main.css (chunks main and main)
Odpowiedzi:
nie jestem do końca zaznajomiony z twoim podejściem, więc pokażę ci powszechny sposób, aby ci pomóc.
Przede wszystkim na twoim
output
określasz,filename
doapp.js
którego ma sens dla mnie, że wynik nadal będzieapp.js
. Jeśli chcesz, aby był dynamiczny, po prostu użyj"filename": "[name].js"
.Ta
[name]
część sprawi, że nazwa pliku będzie dla Ciebie dynamiczna. To jest cel twojegoentry
przedmiotu. Każdy klucz będzie używany jako nazwa w miejsce klucza[name].js
.Po drugie, możesz użyć
html-webpack-plugin
. Nie musisz uwzględniać go jako plikutest
.źródło
Miałem ten sam problem, stwierdziłem, że ustawia statyczną nazwę pliku wyjściowego, która powoduje mój problem, w obiekcie wyjściowym wypróbuj następujący obiekt.
output:{ filename: '[name].js', path: __dirname + '/build', chunkFilename: '[id].[chunkhash].js' },
To sprawia, że nazwy plików są różne i nie kolidują.
EDYCJA: Jedną rzeczą, którą niedawno odkryłem, jest to, że powinieneś używać hasha zamiast chunkhash, jeśli używasz przeładowywania HMR. Nie zagłębiłem się w przyczynę problemu, ale po prostu wiem, że użycie chunkhash uszkodziło moją konfigurację pakietu internetowego
output: { path: path.resolve(__dirname, 'dist'), filename: '[name].[hash:8].js', sourceMapFilename: '[name].[hash:8].map', chunkFilename: '[id].[hash:8].js' };
Powinno wtedy działać dobrze z HMR :)
EDYCJA lipiec 2018:
Trochę więcej informacji na ten temat.
Hash Jest to hash generowany za każdym razem, gdy kompiluje się pakiet WebPack, w trybie deweloperskim jest dobry do niszczenia pamięci podręcznej podczas programowania, ale nie powinien być używany do długoterminowego buforowania plików. Spowoduje to nadpisanie skrótu na każdej kompilacji projektu.
Chunkhash Jeśli użyjesz tego w połączeniu z fragmentem środowiska uruchomieniowego, możesz go użyć do długoterminowego buforowania, fragment środowiska wykonawczego zobaczy, co się zmieniło w kodzie źródłowym i zaktualizuje odpowiednie skróty fragmentów. Nie zaktualizuje innych, umożliwiając buforowanie plików.
źródło
Miałem dokładnie ten sam problem. Wydaje się, że problem występuje z
file-loader
. Błąd zniknął, gdy usunąłem test HTML ihtml-webpack-plugin
zamiast tego dołączyłem, aby wygenerowaćindex.html
plik. To jest mójwebpack.config.js
plik: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] }
Wtyczka html-webpack-plugin generuje plik index.html i automatycznie wstawia do niego dołączony plik js.
źródło
HTMLWebpackPlugin
lubhtml-loader
, ale nie oba.Miałem ten sam problem i znalazłem to w dokumentach.
output: { path:__dirname+'/dist/js', //replace filename:'app.js' filename:'[name].js' }
źródło
Napotkałem ten błąd w moim lokalnym środowisku deweloperskim. Dla mnie rozwiązaniem tego błędu było wymuszenie odbudowy plików. Aby to zrobić, dokonałem niewielkiej zmiany w jednym z moich plików CSS.
Ponownie załadowałem przeglądarkę i błąd zniknął.
źródło
Ten sam błąd w projekcie Vue.js podczas wykonywania e2e z Karmą. Strona została udostępniona przy użyciu statycznego szablonu index.html z /dist/build.js . Otrzymałem ten błąd podczas uruchamiania Karmy.
Polecenie wydania Karmy przy użyciu pliku package.json brzmiało:
"test": "cross-env BABEL_ENV=test CHROME_BIN=$(which chromium-browser) karma start --single-run"
Konfiguracja wyjściowa w webpack.config.js była następująca:
module.exports = { output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' }, ... }
Moje rozwiązanie: zainspirowany odpowiedzią Evana Burbidge'a dołączyłem na końcu pliku webpack.config.js :
if (process.env.BABEL_ENV === 'test') { module.exports.output.filename = '[name].[hash:8].js' }
A potem w końcu zadziałało zarówno w przypadku udostępniania stron, jak i e2e.
źródło
Zmieniłem
index.html
plik z/public
katalogu na,/src
aby naprawić ten problem. (Webpack 5.1.3)źródło