Konflik: Beberapa aset dikirim ke nama file yang sama


89

Saya seorang pemula webpack yang ingin mempelajari semua tentang itu. Saya menemukan konflik saat menjalankan webpack saya yang memberi tahu saya:

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

Apa yang harus saya lakukan untuk menghindari konflik?

Ini adalah webpack.config.js saya:

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


6
yang ingin saya ketahui adalah alat apa yang menulis kesalahan seperti "Konflik: Beberapa aset dikeluarkan ke nama file yang sama slots.js". Mengapa Anda tidak memasukkan nama sialan dari aset yang berkonflik dalam kesalahan itu alih-alih memaksa pengguna untuk melacaknya ???
Michael Johnston

Kabar baik! Kesalahan telah diperbarui. Ini sekarang dengan membantu membacaConflict: Multiple chunks emit assets to the same filename main.css (chunks main and main)
Cheeso

Jawaban:


99

Saya tidak begitu paham dengan pendekatan Anda, jadi saya akan menunjukkan cara umum untuk membantu Anda.

Pertama-tama, pada Anda output, Anda menentukan filenameuntuk app.jsyang masuk akal bagi saya bahwa output akan tetap app.js. Jika Anda ingin membuatnya dinamis, gunakan saja "filename": "[name].js".

Bagian tersebut [name]akan membuat nama file dinamis untuk Anda. Itulah tujuan Anda entrysebagai obyek. Setiap kunci akan digunakan sebagai nama untuk menggantikan [name].js.

Dan kedua, Anda dapat menggunakan html-webpack-plugin. Anda tidak perlu memasukkannya sebagai file test.


13
akan lebih bagus jika ini memiliki sampel yang cocok dengan aslinya
roberto tomás

26

Saya memiliki masalah yang sama, saya menemukan itu mengatur nama file output statis yang menyebabkan masalah saya, dalam objek output coba objek berikut.

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

Ini membuatnya agar nama file berbeda dan tidak bentrok.

EDIT: Satu hal yang baru-baru ini saya temukan adalah Anda harus menggunakan hash daripada chunkhash jika menggunakan HMR reload. Saya belum menggali akar masalahnya tetapi saya hanya tahu bahwa menggunakan chunkhash melanggar konfigurasi webpack saya

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

Seharusnya bekerja dengan baik dengan HMR kemudian :)

EDIT Juli 2018:

Sedikit lebih banyak informasi tentang ini.

Hash Ini adalah hash yang dihasilkan setiap kali webpack dikompilasi, dalam mode dev ini bagus untuk perusakan cache selama pengembangan tetapi tidak boleh digunakan untuk cache jangka panjang file Anda. Ini akan menimpa Hash pada setiap pembangunan proyek Anda.

Chunkhash Jika Anda menggunakan ini bersama dengan runtime chunk maka Anda dapat menggunakannya untuk caching jangka panjang, runtime chunk akan melihat apa yang berubah dalam kode sumber Anda dan memperbarui hash chunks yang sesuai. Itu tidak akan memperbarui yang lain memungkinkan file Anda untuk di-cache.


10

Saya memiliki masalah yang persis sama. Masalahnya tampaknya terjadi dengan file-loader. Kesalahan hilang ketika saya menghapus tes html dan html-webpack-pluginsebagai gantinya disertakan untuk menghasilkan index.htmlfile. Ini webpack.config.jsfile saya :

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 menghasilkan file index.html dan secara otomatis memasukkan file js yang dibundel ke dalamnya.


1
Ini memecahkan masalah saya juga. Tampaknya Anda dapat memiliki HTMLWebpackPlugin, atau html-loader, tetapi tidak keduanya.
Raphael Rafatpanah

6

Saya memiliki masalah yang sama, dan saya menemukannya di dokumen.

Jika konfigurasi Anda membuat lebih dari satu "potongan" (seperti dengan beberapa titik masuk atau saat menggunakan plugin seperti CommonsChunkPlugin), Anda harus menggunakan substitusi untuk memastikan bahwa setiap file memiliki nama yang unik.

  • [name] diganti dengan nama potongan.
  • [hash] diganti dengan hash kompilasi.
  • [chunkhash] diganti dengan hash dari potongan tersebut.
 output: {
    path:__dirname+'/dist/js',

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

2

Saya mengalami kesalahan ini di lingkungan dev lokal saya. Bagi saya, solusi untuk kesalahan ini adalah memaksa file untuk dibangun kembali. Untuk melakukan ini, saya membuat perubahan kecil pada salah satu file CSS saya.

Saya memuat ulang browser saya dan kesalahannya hilang.


Ingin menggunakan asyncComponent. Kemudian saya menemukan masalah ini dengan file yang sebelumnya ada di komponen lain. Benang restart sederhana memperbaikinya. Terima kasih!
kidz

0

Kesalahan yang sama dalam proyek Vue.js saat melakukan e2e dengan Karma. Halaman disajikan menggunakan index.html template statis dengan /dist/build.js . Dan mendapatkan kesalahan ini menjalankan Karma.

Perintah untuk menerbitkan Karma menggunakan package.json adalah:

"test": "cross-env BABEL_ENV=test CHROME_BIN=$(which chromium-browser) karma start --single-run"

Konfigurasi keluaran di webpack.config.js adalah:

 module.exports = {
  output: {
   path: path.resolve(__dirname, './dist'),
   publicPath: '/dist/',
   filename: 'build.js'
  },
  ...
 }

Solusi saya: terinspirasi oleh jawaban Evan Burbidge, saya menambahkan yang berikut ini di akhir webpack.config.js :

if (process.env.BABEL_ENV === 'test') {
  module.exports.output.filename = '[name].[hash:8].js'
}

Dan kemudian akhirnya berfungsi untuk penyajian halaman dan e2e.


0

Saya mengubah index.htmlfile dari /publicdirektori ke /srcuntuk memperbaiki masalah ini. (Webpack 5.1.3)

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.