ওয়েবপ্যাক কনফিগারেশনে একাধিক আউটপুট পাথ কীভাবে তৈরি করবেন

Question

ওয়েবপ্যাক.কনফিগ.জেএস ফাইলে কীভাবে একাধিক আউটপুট পাথ তৈরি করতে হয় তা কি কেউ জানেন? আমি বুটস্ট্র্যাপ-স্যাস ব্যবহার করছি যা কয়েকটি ভিন্ন ফন্ট ফাইল, ইত্যাদির সাথে আসে etc. ইত্যাদি। ওয়েবপ্যাকের প্রক্রিয়া করার জন্য আমি ফাইল-লোডারকে অন্তর্ভুক্ত করেছি যা সঠিকভাবে কাজ করছে, তবে যে ফাইলগুলি আউটপুট দেয় তা আমি নির্দিষ্ট করে আউটপুট পথে সংরক্ষণ করছি being আমার বাকি ফাইলগুলি:

    output: {
      path: __dirname + "/js",
      filename: "scripts.min.js"
    }

আমি এমন কিছু অর্জন করতে চাই যেখানে আমি সম্ভবত ওয়েবপ্যাকটি যা আউটপুট করছে তার জন্য এবং .ওফ.ওট ইত্যাদি ইত্যাদির জন্য এক্সটেনশনের ধরণের দিকে নজর দিতে পারি এবং সেগুলিকে অন্য একটি আউটপুট পাথের দিকে চালিত করে। এটা কি সম্ভব?

আমি কিছুটা গুগলিং করেছি এবং এই * ইস্যুটি গিথুব জুড়ে এসেছি যেখানে বেশ কয়েকটি সমাধান দেওয়া হচ্ছে, সম্পাদনা করুন:

তবে দেখে মনে হচ্ছে হ্যাশ পদ্ধতি ব্যবহার করে আউটপুট নির্দিষ্ট করতে আপনাকে এন্ট্রি পয়েন্টটি জানতে হবে যেমন:

var entryPointsPathPrefix = './src/javascripts/pages';
var WebpackConfig = {
  entry : {
    a: entryPointsPathPrefix + '/a.jsx',
    b: entryPointsPathPrefix + '/b.jsx',
    c: entryPointsPathPrefix + '/c.jsx',
    d: entryPointsPathPrefix + '/d.jsx'
  },

  // send to distribution
  output: {
    path: './dist/js',
    filename: '[name].js'
  }
}

* https://github.com/webpack/webpack/issues/1189

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

Answer 1

আমি যেহেতু webpack শুধুমাত্র জুন 2016. হিসাবে আমি অনুমান আপনি ইতিমধ্যে দেখা কনফিগারেশন প্রতি এক আউটপুট সমর্থন যদি আমরা একই সমস্যা আছে নিশ্চিত নই GitHub থেকে ইস্যু ।

তবে আমি মাল্টি-সংকলক ব্যবহার করে আউটপুট পাথ পৃথক করি । (যেমন এর কনফিগারেশন অবজেক্টকে পৃথক করে webpack.config.js)।

var config = {
    // TODO: Add common Configuration
    module: {},
};

var fooConfig = Object.assign({}, config, {
    name: "a",
    entry: "./a/app",
    output: {
       path: "./a",
       filename: "bundle.js"
    },
});
var barConfig = Object.assign({}, config,{
    name: "b",
    entry: "./b/app",
    output: {
       path: "./b",
       filename: "bundle.js"
    },
});

// Return Array of Configurations
module.exports = [
    fooConfig, barConfig,       
];

যদি তাদের মধ্যে আপনার সাধারণ কনফিগারেশন থাকে তবে আপনি প্রসারিত গ্রন্থাগার বা Object.assignES6 বা {...}ES7 এ স্প্রেড অপারেটর ব্যবহার করতে পারেন ।

Comments

আমি স্নিপেটটি চালাইনি, কিছু ত্রুটি বা টাইপ ঘটতে পারে

— ইয়েও

আমি আপনার স্নিপেটটি চালিয়েছি, কবজির মতো কাজ করি ... অবাক করা কেউ এটিকে চিহ্নিত করেনি, এফ হ'ল অগ্রণী বিকাশকারীরা, ধৈর্য নেই, সর্বদা তাড়াতাড়ি ;-)। আমি কনফিগারগুলি একইভাবে রফতানি করি, তবে আমার ঘোষণাটি আলাদা / মানক: var কনফিগারেশন = {এন্ট্রি: SOURCE_DIR + '/index.jsx', .... any পাশাপাশি কোনও মাল্টি সংকলকও ব্যবহার করেনি: - \

— আবার্গিনি

অথবা আপনি কেবল এনএমপি তে একটি ওয়েবপ্যাক এবং& সিপি ইত্যাদি করতে পারেন ?

— সুপারউবারডুপার

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

— অ্যাড্রিয়ান মাইসা

<pre> <code> var config = {// TODO: সাধারণ কনফিগারেশন মডিউল যুক্ত করুন: {},}; </code> </pre> module{}অবজেক্টটি ভুল। এটি প্রয়োজন হয় না। এটা তোলে প্রসারিত হবে / কীওয়ার্ড হিসাবে একই পর্যায়ে মার্জ name, entry, output(আপনার উদাহরণ থেকে)। <pre> <code> {মডিউল: {মোড: "বিকাশ", devtool: "উত্স-মানচিত্র"}}, নাম: "ক", প্রবেশ: "./a/app", আউটপুট: {পথ: "/ একটি ", ফাইলের নাম:" bundle.js "}} </code> </pre>

— রব ওয়া

Answer 2

ওয়েবপ্যাক একাধিক আউটপুট পাথ সমর্থন করে।

এন্ট্রি কী হিসাবে আউটপুট পাথ সেট করুন। এবং nameআউটপুট টেম্পলেট হিসাবে ব্যবহার করুন ।

ওয়েবপ্যাক কনফিগারেশন:

entry: {
    'module/a/index': 'module/a/index.js',
    'module/b/index': 'module/b/index.js',
},
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
}

উত্পন্ন:

└── module
    ├── a
    │   └── index.js
    └── b
        └── index.js

Comments

আমার ক্ষেত্রে আমি চাই যে একটি আউটপুট চুনখ্যাশ না রাখে, এর কোনও সহজ সমাধান আছে কি? ধন্যবাদ।

— raRaRa

@ চেংগেনঘং আমি বিশ্বাস করি যে এতে উত্পন্ন আউটপুট পাথের প্রয়োজন distহবে। সুতরাং module/a/index.jsআউটপুট পাথ হওয়ার পরিবর্তে এটি হওয়া উচিত module/a/dist/index.jsঅন্যথায়, আপনি আপনার এন্ট্রি ফাইলগুলি ওভাররাইড করছেন।

— নাচ

@ সং distফোল্ডারটি ইতিমধ্যে আউটপুট পাথে কনফিগার করা হয়েছে। সুতরাং উত্পন্ন ফাইলটি আসলে হবে dist/module/a/index.js, যা আমি উল্লেখ করি নি।

— heেংকেনঘং

আমি মনে করি এটি গ্রহণযোগ্য উত্তর হওয়া উচিত কারণ এটি ওয়েবপ্যাক 4 ডক্সের উত্তর। -> webpack.js.org/concepts/output/#multiple-entry-points

— উইল

@ ইরারাআর পার্টিতে লেট, তবে আপনি output.filenameএখানে দলিল হিসাবে ফাংশন ব্যবহার করে তা করতে পারেন : webpack.js.org/configration/output/#outputfilename

— টমাস

Answer 3

আপনি যদি একাধিক আউটপুট পাথের সাথে একই স্তরের গভীরতা এবং ফোল্ডার কাঠামো সমেত বেঁচে থাকতে পারেন তবে ওয়েবপ্যাক 2 এ করার একটি উপায় আছে (ওয়েবপ্যাক 1.x দিয়ে এখনও পরীক্ষা করতে হবে)

মূলত আপনি ডক বিধিগুলি অনুসরণ করেন না এবং আপনি ফাইলের নামের জন্য একটি পথ সরবরাহ করেন।

module.exports = {
    entry: {
      foo: 'foo.js',
      bar: 'bar.js'
    },

    output: {
      path: path.join(__dirname, 'components'),
      filename: '[name]/dist/[name].bundle.js', // Hacky way to force webpack   to have multiple output folders vs multiple files per one path
    }
};

এটি এই ফোল্ডারটির কাঠামো গ্রহণ করবে

/-
  foo.js
  bar.js

এবং এটি চালু

/-
  foo.js
  bar.js
  components/foo/dist/foo.js
  components/bar/dist/bar.js

Comments

@ সিএনসিএনসন এটি এখানে নথিভুক্ত করা হয়েছে ওয়েবপ্যাক.জেএস.আর.জি. / কনফিগারেশন / আউটপুট /# আউটপুট ফাইল ফাইল নামটি "এখনও অনুমোদিত"।

— জন হেন্কেল

Answer 4

আমি একটি প্লাগইন লিখেছিলাম যা আশা করি আপনি যা করতে পারেন তা করতে পারেন, আপনি পরিচিত বা অজানা এন্ট্রি পয়েন্টগুলি নির্দিষ্ট করতে পারেন ( গ্লোব ব্যবহার করে ) এবং সঠিক ফলাফলগুলি নির্দিষ্ট করতে পারেন বা এন্ট্রি ফাইলের পথ এবং নাম ব্যবহার করে গতিশীলভাবে এগুলি উত্পন্ন করতে পারেন। https://www.npmjs.com/package/webpack-entry-plus

Answer 5

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

এই ক্ষেত্রে আমি পরিবর্তে ফাইলম্যানেজার ওয়েবেপ্যাকপ্লাগিন প্লাগইন ব্যবহার করার পরামর্শ দিই:

const FileManagerPlugin = require('filemanager-webpack-plugin');
// ...
plugins: [
    // ...
    new FileManagerPlugin({
      onEnd: {
        copy: [{
          source: './dist/*.*',
          destination: './public/',
        }],
      },
    }),
],

Answer 6

আপনার কেবলমাত্র একটি আউটপুট পাথ থাকতে পারে।

ডক্স থেকে https://github.com/webpack/docs/wiki/configration#output

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

আপনি যদি কোনও হ্যাশিং ([হ্যাশ] বা [চুনখ্যাশ]) ব্যবহার করেন তবে মডিউলগুলির নিয়মিত ক্রম রয়েছে তা নিশ্চিত করুন make ঘটনার অর্ডারপ্লাগিন বা রেকর্ডপথ ব্যবহার করুন।

Comments

ধন্যবাদ। কারও কারও সাথে কাজ করা সম্ভব না হলে আমি কিউ ছাড়ব।

— 23

2 আউটপুট পাথের প্রয়োজনে আপনার ব্যবহারের ক্ষেত্রে কী? মনে হচ্ছে আপনি 2 টি অ্যাপ্লিকেশন বা 1 অ্যাপ্লিকেশন এবং 1 মডিউল চান।

— প্রাক্তন- zac-tly

আমি ভেবেছিলাম আমার এমন একটি দরকার যা ফাইল-লোডার দ্বারা উত্পাদিত আউটপুটকে উত্সর্গ করা হয়েছিল যা সমস্ত প্রকল্পের মূলের মধ্যে চলেছিল যখন আমি এটির নিজের ফোল্ডারে এটি চেয়েছিলাম। আমি নীচে আমার উত্তর অনুসারে লোডার নিজেই আউটপুট পাথ পুনঃনির্দেশিত করে দিয়েছি।

— spb

এটি সম্পূর্ণ সত্য নয়। আপনি প্রযুক্তিগতভাবে কেবল একটি আউটপুট পাথ নির্দিষ্ট করতে পারেন তবে এটি একটি এন্ট্রি অবজেক্টে প্রতিটি কীয়ের জন্য প্রযোজ্য হবে - আপনাকে একাধিক আউটপুট - ওয়েবপ্যাক.জেএস.আর.এস.সি

— কনসেপ্টস /

Answer 7

আমি প্রকৃতপক্ষে ফাইল-লোডার মডিউলটিতে সূচি.জেজে গিয়েছি এবং সামগ্রীগুলি যেখানে নির্গত হয়েছিল সেখানে পরিবর্তন করেছি changing এটি সম্ভবত সর্বোত্তম সমাধান নয়, তবে অন্য কোনও উপায় না হওয়া পর্যন্ত এটি ঠিক আছে যেহেতু আমি জানি ঠিক কী এই লোডার দ্বারা পরিচালিত হচ্ছে যা হ'ল ফন্টগুলি।

//index.js
var loaderUtils = require("loader-utils");
module.exports = function(content) {
    this.cacheable && this.cacheable();
    if(!this.emitFile) throw new Error("emitFile is required from module system");
    var query = loaderUtils.parseQuery(this.query);
    var url = loaderUtils.interpolateName(this, query.name || "[hash].[ext]", {
        context: query.context || this.options.context,
        content: content,
        regExp: query.regExp
    });
    this.emitFile("fonts/"+ url, content);//changed path to emit contents to "fonts" folder rather than project root
    return "module.exports = __webpack_public_path__ + " + JSON.stringify( url) + ";";
}
module.exports.raw = true;

Comments

এটি এখনও আপনার পক্ষে কোনও সমস্যা কিনা তা জানেন না তবে দেখুন এনএমজেজেএস

— প্যাকেজ