দ্বন্দ্ব: একাধিক সম্পদ একই ফাইলের নাম থেকে নির্গত হয়

Question

আমি একটি ওয়েবপ্যাক রুকি যিনি এটি সম্পর্কে সমস্ত কিছু জানতে চান। আমার ওয়েবপ্যাকটি চালিয়ে যাওয়ার সময় আমি একটি বিরোধের মুখোমুখি হয়েছি:

ERROR in chunk html [entry] app.js Conflict: Multiple assets emit to the same filename app.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

আমি যেটি জানতে চাইছি তা হল "সংঘাত: একাধিক সম্পদ একই ফাইলের নাম স্লট.জেজে" নির্গত হয় like ব্যবহারকারীকে এটি সন্ধান করতে বাধ্য করার পরিবর্তে আপনি কেন ত্রুটিযুক্ত বিরোধী সম্পদের জঘন্য নাম রাখবেন না ???

— মাইকেল জনস্টন

ভাল খবর! ত্রুটি আপডেট করা হয়েছে। এটি এখন সহায়কভাবে পড়েConflict: Multiple chunks emit assets to the same filename main.css (chunks main and main)

— চিজো

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

এইচএমআরের সাথে তখন ঠিকঠাক কাজ করা উচিত :)

জুলাই 2018 এডিট করুন:

এ সম্পর্কে আরও কিছু তথ্য।

হ্যাশ এটি প্রতিবার তৈরি হওয়া একটি হ্যাশ যা ওয়েবপ্যাক সংকলন করে, ডেভ মোডে এটি উন্নয়নের সময় ক্যাশে বুস্টিংয়ের পক্ষে ভাল তবে আপনার ফাইলগুলির দীর্ঘমেয়াদী ক্যাশে যাওয়ার জন্য ব্যবহার করা উচিত নয়। এটি আপনার প্রকল্পের প্রতিটি বিল্ডে হ্যাশটিকে ওভাররাইট করবে।

চুনখশ যদি আপনি এটি রানটাইম খণ্ডের সাথে একত্রে ব্যবহার করেন তবে আপনি এটি দীর্ঘমেয়াদী ক্যাচিংয়ের জন্য ব্যবহার করতে পারেন, রানটাইম খণ্ডটি আপনার উত্স কোডে কী পরিবর্তন হয়েছে তা দেখতে পাবে এবং সংশ্লিষ্ট খণ্ডগুলি হ্যাশ আপডেট করবে। এটি অন্যদের আপনার ফাইল ক্যাশে হওয়ার অনুমতি দিচ্ছে না।

Answer 3

আমার সত্যিকার অর্থে একই সমস্যা ছিল। সমস্যাটি মনে হয় এটির সাথেই ঘটে file-loader। আমি এইচটিএমএল পরীক্ষাটি সরিয়ে ফেললাম এবং 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 ফাইল উত্পন্ন করে এবং এতে স্বয়ংক্রিয়ভাবে বান্ডেলযুক্ত জেএস ফাইল সংক্রামিত করে।

Comments

এটি আমার সমস্যাটিও সমাধান করেছে। দেখে মনে হচ্ছে আপনার কাছে HTMLWebpackPlugin, বা html-loaderদুটি থাকতে পারে।

— রাফেল রাফাতপানঃ

Answer 4

আমারও একই সমস্যা ছিল এবং আমি এটি নথিতে পেয়েছি।

যদি আপনার কনফিগারেশনটি একক "খণ্ড" (একাধিক এন্ট্রি পয়েন্টগুলির সাথে বা কমন্সচানকপ্লাগিনের মতো প্লাগইন ব্যবহার করার সময়) বেশি তৈরি করে থাকে তবে প্রতিটি ফাইলের একটি অনন্য নাম রয়েছে তা নিশ্চিত করার জন্য আপনার বিকল্প ব্যবহার করা উচিত।

• [name] অংশটির নাম দ্বারা প্রতিস্থাপিত হয়।
• [hash] সংকলনের হ্যাশ দ্বারা প্রতিস্থাপিত হয়।
• [chunkhash] খণ্ডের হ্যাশ দ্বারা প্রতিস্থাপিত হয়।

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

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

Answer 5

আমি আমার স্থানীয় দেব পরিবেশে এই ত্রুটির মুখোমুখি হয়েছি। আমার জন্য, এই ত্রুটির সমাধান ছিল ফাইলগুলি পুনর্নির্মাণে বাধ্য করা। এটি করতে, আমি আমার একটি সিএসএস ফাইলে একটি সামান্য পরিবর্তন করেছি।

আমি আমার ব্রাউজারটি আবার লোড করেছি এবং ত্রুটিটি চলে গেছে।

Comments

অ্যাসিঙ্ক কম্পিউটার ব্যবহার করতে চেয়েছিলেন। তারপরে আমি এই ফাইলটি এমন একটি ফাইলের সাথে খুঁজে পেয়েছি যা অন্যান্য উপাদানগুলির আগে ছিল। সরল পুনঃসূচনা সুতা এটি স্থির করে। ধন্যবাদ!

— কিডজ

Answer 6

কর্মের সাথে e2e করার সময় কোনও ভ্যু.জেএস প্রকল্পে একই ত্রুটি। পৃষ্ঠা একটি স্ট্যাটিক টেমপ্লেট ব্যবহার পরিবেশিত হয় index.html সঙ্গে /dist/build.js । এবং এই ত্রুটিটি পেয়েছিল কর্মফল।

প্যাকেজ.জসন ব্যবহার করে কর্ম প্রকাশ করার আদেশটি ছিল:

"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'
  },
  ...
 }

আমার সমাধান: ইভান বার্বিজের উত্তরে অনুপ্রাণিত হয়ে আমি ওয়েবপ্যাক.কনফিগ.জেএস এর শেষে নিম্নলিখিতটি সংযোজন করেছি :

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

এবং তারপরে এটি শেষ পর্যন্ত পৃষ্ঠা পরিবেশন এবং e2e উভয়ের পক্ষে কাজ করেছিল।

Answer 7

আমি এই সমস্যাটি সমাধানের জন্য ডিরেক্টরি index.htmlথেকে ফাইল পরিবর্তন করেছি । (ওয়েবপ্যাক 5.1.3)/public/src