Çakışma: Birden çok varlık aynı dosya adına yayılıyor

Ben her şeyi öğrenmek isteyen bir web paketi çaylakıyım. Web paketimi çalıştırırken bana şunu söyleyen bir çatışmayla karşılaştım:

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

Çatışmayı önlemek için ne yapmalıyım?

Bu benim webpack.config.js'im:

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

Yaklaşımınıza pek aşina değilim, bu yüzden size yardımcı olmanın ortak bir yolunu göstereceğim.

Her şeyden önce, senin üzerine output, sen belirtiyorsanız filenameiçin app.jshangi çıkış hala olacağı benim için mantıklı app.js. Dinamik hale getirmek istiyorsanız, sadece kullanın "filename": "[name].js".

[name]Bölüm sizin için dosya adı dinamiğini yapacaktır. entryBir nesne olarak amacınız budur . Her anahtar [name].js,.

İkincisi html-webpack-plugin,. Olarak eklemenize gerek yoktur test.

Aynı sorunu yaşadım, sorunuma neden olan statik bir çıktı dosyası adı ayarladığını buldum, çıktı nesnesinde aşağıdaki nesneyi deneyin.

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

Bu, dosya adlarının farklı olmasını ve çakışmamasını sağlar.

DÜZENLEME: Yakın zamanda bulduğum bir şey, HMR yeniden yüklemeyi kullanıyorsanız, chunkhash yerine bir karma kullanmanız gerektiğidir. Sorunun kökenine inmedim ancak chunkhash kullanmanın web paketi yapılandırmamı bozduğunu biliyorum

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

HMR ile iyi çalışmalı o zaman :)

Temmuz 2018 DÜZENLEME:

Bununla ilgili biraz daha bilgi.

Karma Bu, web paketi her derlendiğinde oluşturulan bir karmadır, geliştirme modunda bu, geliştirme sırasında önbellek bozma için iyidir, ancak dosyalarınızın uzun vadeli önbelleğe alınması için kullanılmamalıdır. Bu, projenizin her yapısında Hash'in üzerine yazacaktır.

Chunkhash Bunu bir çalışma zamanı öbeği ile birlikte kullanırsanız, uzun vadeli önbelleğe alma için kullanabilirsiniz, çalışma zamanı öbekleri kaynak kodunuzda nelerin değiştiğini görecek ve karşılık gelen parçaların karmalarını güncelleyecektir. Dosyalarınızın önbelleğe alınmasına izin vererek başkalarını güncellemez.

Ben tam olarak aynı problem vardı. Sorun file-loader,. Html testini kaldırıp html-webpack-pluginbunun yerine bir index.htmldosya oluşturmak için dahil ettiğimde hata ortadan kalktı . Bu benim webpack.config.jsdosyam:

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-eklentisi bir index.html dosyası oluşturur ve paketlenmiş js dosyasını buna otomatik olarak enjekte eder.

Ben de aynı sorunu yaşadım ve bunları belgelerde buldum.

Yapılandırmanız birden fazla "yığın" oluşturuyorsa (birden çok giriş noktasında olduğu gibi veya CommonsChunkPlugin gibi eklentileri kullanırken), her dosyanın benzersiz bir ada sahip olmasını sağlamak için ikameleri kullanmalısınız.

• [name] öbeğin adı ile değiştirilir.
• [hash] , derlemenin karması ile değiştirilir.
• [chunkhash] , parçanın karması ile değiştirilir.

 output: {
    path:__dirname+'/dist/js',

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

Yerel geliştirme ortamımda bu hatayla karşılaştım. Benim için bu hatanın çözümü, dosyaları yeniden oluşturmaya zorlamaktı. Bunu yapmak için CSS dosyalarımdan birinde küçük bir değişiklik yaptım.

Tarayıcımı yeniden yükledim ve hata ortadan kalktı.

Karma ile e2e yaparken bir Vue.js projesinde aynı hata. Sayfa, /dist/build.js ile statik bir şablon index.html kullanılarak sunuldu . Ve Karma çalıştırırken bu hatayı aldım.

Kullanarak sorunu Karma Komut package.json oldu:

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

Webpack.config.js'deki çıktı yapılandırması şöyleydi :

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

Çözümüm : Evan Burbidge'nin cevabından esinlenerek aşağıdakileri webpack.config.js'nin sonuna ekledim :

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

Ve sonunda hem sayfa sunumu hem de e2e için çalıştı.

Bu sorunu düzeltmek için index.htmldosyayı /publicdizinden olarak değiştirdim /src. (Web paketi 5.1.3)