संघर्ष: एक ही फ़ाइल नाम के लिए कई संपत्तियाँ निकलती हैं

Question

मैं एक वेबपैक बदमाश हूं जो इसके बारे में सब सीखना चाहता है। जब मेरा वेबपैक मुझे बता रहा था, तब मैं एक विवाद में आया:

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

संघर्ष से बचने के लिए मुझे क्या करना चाहिए?

यह मेरा 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]",
      }
    ]
  }
};

Comments

जो मैं जानना चाहता हूं कि कौन सा उपकरण एक त्रुटि लिखता है जैसे "संघर्ष: एक से अधिक संपत्ति एक ही फ़ाइल नाम स्लॉट के लिए निकलती हैं।" आप उपयोगकर्ता को इसे ट्रैक करने के लिए मजबूर करने के बजाय उस त्रुटि में विवादित परिसंपत्तियों के लानत नाम क्यों नहीं डालेंगे ???

— माइकल जॉनसन

खुशखबरी! त्रुटि अपडेट की गई है। अब यह मदद करता हैConflict: Multiple chunks emit assets to the same filename main.css (chunks main and main)

— Cheeso

Answer 1

मैं आपके दृष्टिकोण से बिलकुल परिचित नहीं हूँ इसलिए मैं आपकी मदद करने के लिए एक सामान्य तरीका दिखाऊँगा।

सबसे पहले, अपने पर output, आप निर्दिष्ट करते हैं filenameकरने के लिए app.jsजो मेरे लिए समझ में आता है कि उत्पादन अभी भी हो जाएगा app.js। यदि आप इसे गतिशील बनाना चाहते हैं, तो बस उपयोग करें "filename": "[name].js"।

[name]भाग आप के लिए फ़ाइल नाम गतिशील कर देगा। यह entryएक वस्तु के रूप में आप का उद्देश्य है। प्रत्येक कुंजी को प्रतिस्थापन के नाम के रूप में उपयोग किया जाएगा [name].js।

और दूसरा, आप इसका उपयोग कर सकते हैं html-webpack-plugin। आपको इसे एक के रूप में शामिल करने की आवश्यकता नहीं है test।

Comments

यह बहुत अच्छा होगा अगर यह एक नमूना था जो मूल

— रॉबर्टो टोमैस

Answer 2

मेरे पास एक ही समस्या थी, मैंने पाया कि यह एक स्थिर आउटपुट फ़ाइल नाम सेट कर रहा था जो मेरी समस्या पैदा कर रहा था, आउटपुट ऑब्जेक्ट में निम्न ऑब्जेक्ट को आज़माएं।

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

यह बनाता है ताकि फ़ाइल नाम अलग-अलग हों और यह क्लैश न हो।

संपादित करें: हाल ही में एक बात मुझे मिली है कि आपको एचएमआर पुनः लोडिंग का उपयोग करते हुए चंकश की बजाय हैश का उपयोग करना चाहिए। मैं समस्या की जड़ में नहीं डूबा हूं, लेकिन मुझे सिर्फ इतना पता है कि चंकश का इस्तेमाल करने से मेरा वेबपैक कॉन्फिगर हो रहा था

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

फिर HMR के साथ ठीक काम करना चाहिए :)

EDIT जुलाई 2018:

इस पर थोड़ी और जानकारी।

हैश यह हर बार जब वेबपैक संकलित होता है, तो यह एक हैश है, देव मोड में यह विकास के दौरान कैश बस्टिंग के लिए अच्छा है, लेकिन आपकी फ़ाइलों के दीर्घकालिक कैशिंग के लिए उपयोग नहीं किया जाना चाहिए। यह आपकी परियोजना के प्रत्येक निर्माण पर हैश को अधिलेखित कर देगा।

चंकंश यदि आप इसे रनटाइम चंक के साथ संयोजन में उपयोग करते हैं तो आप इसे दीर्घकालिक कैशिंग के लिए उपयोग कर सकते हैं, रनटाइम चंक यह देखेगा कि आपके स्रोत कोड में क्या परिवर्तन हुआ है और संबंधित चंक्स हैश को अपडेट करें। यह आपकी फ़ाइलों को कैश करने की अनुमति देने वाले अन्य लोगों को अपडेट नहीं करेगा।

Answer 3

मेरे साथ भी ठीक यही समस्या आई. समस्या के साथ होने लगता है file-loader। जब मैंने html परीक्षण को हटाया और फ़ाइल html-webpack-pluginबनाने के बजाय शामिल किया तो त्रुटि दूर हो index.htmlगई। यह मेरी webpack.config.jsफाइल है:

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 एक index.html फ़ाइल उत्पन्न करता है और स्वचालित रूप से इसमें बंडल किए गए js फ़ाइल को इंजेक्ट करता है।

Comments

इससे मेरी समस्या भी हल हो गई। ऐसा लगता है कि आपके पास HTMLWebpackPluginया html-loaderनहीं, लेकिन दोनों हो सकते हैं।

— राफेल रफतपनह

Answer 4

मुझे भी यही समस्या थी, और मैंने इन दस्तावेजों में पाया।

यदि आपका कॉन्फ़िगरेशन एकल "चंक" (एकाधिक प्रविष्टि बिंदुओं के साथ या कॉमन्सकंकप्लगिन जैसे प्लगइन्स का उपयोग करते समय) से अधिक बनाता है, तो आपको यह सुनिश्चित करने के लिए प्रतिस्थापन का उपयोग करना चाहिए कि प्रत्येक फ़ाइल का एक अद्वितीय नाम है।

• [name] को चंक के नाम से बदल दिया गया है।
• [hash] संकलन के हैश द्वारा प्रतिस्थापित किया जाता है।
• [chunkhash] इसे ठग के हैश द्वारा बदल दिया गया है।

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

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

Answer 5

मुझे अपने स्थानीय देव परिवेश में इस त्रुटि का सामना करना पड़ा। मेरे लिए, इस त्रुटि का समाधान फ़ाइलों को फिर से बनाने के लिए मजबूर करना था। ऐसा करने के लिए, मैंने अपनी सीएसएस फ़ाइलों में से एक में मामूली बदलाव किया।

मैंने अपना ब्राउज़र पुनः लोड किया और त्रुटि दूर हो गई।

Comments

AsyncComponent का उपयोग करना चाहता था। तब मुझे यह समस्या एक फ़ाइल के साथ मिली जो पहले अन्य घटक में थी। सरल पुनरारंभ यार्न तय है कि। धन्यवाद!

— kidz

Answer 6

कर्म के साथ e2e करते समय Vue.js परियोजना में वही त्रुटि। पृष्ठ को /dist/build.js के साथ एक स्थिर टेम्पलेट index.html का उपयोग करके परोसा गया था । और कर्म को चलाने में यह त्रुटि मिली।

पैकेज का उपयोग कर कर्मा जारी करने की कमान थी । जेसन था:

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

Webpack.config.js में आउटपुट कॉन्फ़िगरेशन था:

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

मेरा समाधान: इवान बर्बिज के उत्तर से प्रेरित होकर मैंने webpack.config.js के अंत में निम्नलिखित जानकारी दी :

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

और फिर यह अंततः पृष्ठ की सेवा और e2e दोनों के लिए काम किया।

Answer 7

मैंने इस समस्या को ठीक करने के लिए निर्देशिका index.htmlसे फ़ाइल बदल दी। (वेबपैक 5.1.3)/public/src