Konflik: Beberapa aset dikirim ke nama file yang sama

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

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.

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.

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.

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

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.

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.

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