Konflikt: wiele zasobów jest emitowanych do tej samej nazwy pliku

89

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

Andreasrein
źródło
6
chcę wiedzieć, jakie narzędzie zapisuje błąd, np. „Konflikt: wiele zasobów emituje do pliku slots.js o tej samej nazwie”. Dlaczego nie miałbyś umieszczać cholernych nazw zasobów będących w konflikcie w tym błędzie zamiast zmusić użytkownika do wyśledzenia go ???
Michael Johnston,
Dobre wieści! Błąd został zaktualizowany. Teraz pomocnie brzmiConflict: Multiple chunks emit assets to the same filename main.css (chunks main and main)
Cheeso

Odpowiedzi:

99

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 outputokreślasz, filenamedo app.jsktórego ma sens dla mnie, że wynik nadal będzie app.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 twojego entryprzedmiotu. 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 pliku test.

ickyrr
źródło
13
byłoby wspaniale, gdyby miała próbkę
pasującą
26

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.

Evan Burbidge
źródło
10

Miałem dokładnie ten sam problem. Wydaje się, że problem występuje z file-loader. Błąd zniknął, gdy usunąłem test HTML i html-webpack-pluginzamiast tego dołączyłem, aby wygenerować index.htmlplik. To jest mój webpack.config.jsplik:

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.

lukastillmann
źródło
1
To również rozwiązało mój problem. Wygląda na to, że możesz mieć HTMLWebpackPluginlub html-loader, ale nie oba.
Raphael Rafatpanah
6

Miałem ten sam problem i znalazłem to w dokumentach.

Jeśli twoja konfiguracja tworzy więcej niż jeden „fragment” (jak w przypadku wielu punktów wejścia lub przy użyciu wtyczek, takich jak CommonsChunkPlugin), powinieneś użyć podstawień, aby upewnić się, że każdy plik ma unikalną nazwę.

  • [name] jest zastępowana nazwą fragmentu.
  • [hash] jest zastępowany hashem kompilacji.
  • [chunkhash] jest zastępowany hashem fragmentu.
 output: {
    path:__dirname+'/dist/js',

    //replace filename:'app.js' 
    filename:'[name].js'
}
hxin
źródło
2

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ął.

MrGood
źródło
Chciał użyć asyncComponent. Potem znalazłem ten problem z plikiem, który był wcześniej w innym komponencie. Proste ponowne uruchomienie przędzy naprawiło to. Dzięki!
kidz
0

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.

Juri Sinitson
źródło
0

Zmieniłem index.htmlplik z /publickatalogu na, /srcaby naprawić ten problem. (Webpack 5.1.3)

Masih Jahangiri
źródło