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

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

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.

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.

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.

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'
}

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

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.

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