Webpack.config কীভাবে কেবল ডিড ফোল্ডারে সূচক html অনুলিপি করবেন

Question

আমি সম্পদগুলি / ডিস্ট্রেটেড স্বয়ংক্রিয় করার চেষ্টা করছি। আমার কাছে নিম্নলিখিত কনফিগারেশন রয়েছে:

module.exports = {
  context: __dirname + "/lib",
  entry: {
    main: [
      "./baa.ts"
    ]
  },
  output: {
    path: __dirname + "/dist",
    filename: "foo.js"
  },
  devtool: "source-map",
  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'awesome-typescript-loader'
      },
      { test: /\.css$/, loader: "style-loader!css-loader" }
    ]
  },
  resolve: {
    // you can now require('file') instead of require('file.js')
    extensions: ['', '.js', '.json']
  }
}

ওয়েবপ্যাক চলাকালীন / ডিআইবি-র পাশে বসে থাকা ডিরেক্টরি থেকে মূল এইচটিএমএলকেও অন্তর্ভুক্ত করতে চাই। কিভাবে আমি এটি করতে পারব?

আপডেট 1 2017_____________

এটি করার এখন আমার প্রিয় html-webpack-pluginউপায়টি কোনও টেম্পলেট ফাইল সহ ব্যবহার করা use গৃহীত উত্তরের জন্যও ধন্যবাদ! এই উপকারটি হ'ল সূচক ফাইলটিতে ক্যাচবাস্টেড জেএস লিঙ্কটি বাক্সের বাইরেও যুক্ত হবে!

Answer 1

বিকল্প 1

আপনার index.jsফাইলে (অর্থাত্ ওয়েবপ্যাক এন্ট্রি) ফাইল-লোডার প্লাগইনের index.htmlমাধ্যমে আপনার প্রয়োজনীয়তা যুক্ত করুন , যেমন:

require('file-loader?name=[name].[ext]!../index.html');

আপনি যখন ওয়েবপ্যাক দিয়ে আপনার প্রকল্পটি তৈরি index.htmlকরেন, আউটপুট ফোল্ডারে আসবে।

বিকল্প 2

ব্যবহারের এইচটিএমএল-webpack-plugin এ সব একটি index.html থাকার এড়ানো। আপনার জন্য কেবল ওয়েবপ্যাকটি ফাইল তৈরি করুন।

Comments

আমি কি কোনওরকম এটিকে কনফিগার ফাইলে কিছু লিখতে লোড করতে পারি?

— কোডভেরিন

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

— ভ্যাকানো

সিএসএসের জন্য @ ভ্যাকাকানো আপনার এই পদ্ধতিটি ব্যবহার করা উচিত নয়। : একটি শৈলী-লোডার এবং CSS-লোডার ব্যবহার করুন, এখানে দেখতে stackoverflow.com/questions/34039826/...

— VitalyB

ওয়েবপ্যাক ভি 2 এ আপনি দৃশ্যত -loaderপ্রত্যয়টি বাদ দিতে পারবেন না । যেমনrequire('file-loader?name=[name].[ext]!../index.html');

— চিন্তা কোরো

@ কোডে ভেরিন হ্যাঁ, আপনার ওয়েবপ্যাক কনফিগারেশনের ফাইলটিতে { test: /index\.html/, loader: 'file-loader', query: { name: '[name].[ext]' }আপনার loadersঅ্যারের মতো কিছু যুক্ত করে কেবল এটিই পরিবেশন করতে আমি ওয়েবপ্যাক-ডেভ-সার্ভারটি পাইনি, অনুরোধ করার জন্য যথেষ্ট পরিমাণে 404 অনুরোধ করছি /(মূলটি বিদ্যমান নেই) !)।

— ব্রায়ান ম্যাকচাটন

Answer 2

আমি ভাইটালিবির উত্তরে একটি বিকল্প যুক্ত করব:

বিকল্প 3

এনপিএমের মাধ্যমে। আপনি যদি এনপিএমের মাধ্যমে আপনার কমান্ডগুলি চালনা করেন তবে আপনি এই প্যাকেজটি আপনার প্যাকেজ.জসনে এই সেটআপটি যুক্ত করতে পারেন (সেখানেও ওয়েবপ্যাক.কনফিগ.জেগুলিও দেখুন)। রান বিকাশের জন্য npm start, এক্ষেত্রে index.html অনুলিপি করার দরকার নেই কারণ ওয়েব সার্ভার উত্স ফাইল ডিরেক্টরি থেকে চালিত হবে এবং bundle.js একই স্থান থেকে পাওয়া যাবে (bundle.js কেবল মেমরিতে বাস করবে তবে) এটি সূচক html এর সাথে একসাথে অবস্থিত থাকলে উপলভ্য হবে)। প্রোডাকশন চলার জন্য npm run buildএবং একটি ডিস্ট ফোল্ডারে আপনার বান্ডেল.জেএস এবং ইনডেক্স এইচটিএমএল ভাল পুরানো সিপি-কমান্ডের সাথে অনুলিপি হয়ে যায়, আপনি নীচে দেখতে পারেন:

"scripts": {
    "test": "NODE_ENV=test karma start",
    "start": "node node_modules/.bin/webpack-dev-server --content-base app",
    "build": "NODE_ENV=production node node_modules/.bin/webpack && cp app/index.html dist/index.html"
  }

আপডেট: বিকল্প 4

এই স্ট্যাকওভারফ্লো উত্তরে বর্ণিত হিসাবে একটি অনুলিপি-ওয়েবপ্যাক-প্লাগইন রয়েছে

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

Comments

বিকল্প 3 এর বিকল্প 1 হওয়া উচিত

— গিল এপসেটেন

আমি বিকল্প 3 ব্যবহার করে চেষ্টা করেছি, তবে সূচিপত্রের HTML পুনরায় লোড করা কার্যকর হয়নি। আপনি কি খুব সহজেই আপনার সূচিপত্র। Html সম্পাদনা করেন না? গুরুত্বপূর্ণ প্রশ্ন.

— পাথর

ব্যবহার করুন এনসিপি CP এর পরিবর্তে যদি আপনি ক্রস ওএস দেব পরিবেশ সমর্থন করার জন্য চাই

— বিবেক Maharajh

Answer 3

আপনি কপিরউবপ্যাক প্লাগিন ব্যবহার করতে পারেন । এটি ঠিক এভাবে কাজ করছে:

module.exports = {
  plugins: [
    new CopyWebpackPlugin([{
      from: './*.html'
    }])
  ]
}

Comments

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

— রবার্ট জ্যাক

Answer 4

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

অন্যান্য সম্পদের জন্য (নয় index.html), আপনি কেবল ওয়েবপ্যাকের মাধ্যমে এগুলিকে বান্ডিল করতে পারেন (এটি হ'ল ওয়েবপ্যাকটি হ'ল)। উদাহরণস্বরূপ var image = require('assets/my_image.png');,। তবে আমি ধরে নিচ্ছি যে আপনার index.htmlপ্রয়োজনগুলি বান্ডিলের অংশ না হওয়া উচিত, এবং তাই এটি বান্ডেলারের পক্ষে কাজ নয়।

Comments

আমি স্পষ্টভাবে ওয়েবপ্যাকে গিয়েছিলাম যাতে আমার গ্রুর্ট বা কুঁচকির দরকার হয় না। অন্য কোন বিকল্প আছে? আমার যদি গাল্প ব্যবহার করা দরকার তবে আমি কেন ওয়েবপ্যাকটি নিয়ে বিরক্ত করব?

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

প্রশ্নটা উল্টো। আপনি যদি গ্রান্ট বা ঝাঁকুনি ব্যবহার করতে পারেন তবে আপনার ওয়েবপ্যাকটি কেন ব্যবহার করা উচিত? তারা খুব ভাল কাজ / বিল্ড সিস্টেম। ওয়েবপ্যাক (বা ব্রাউজারফাই বা r.js) এমন একটি সরঞ্জাম যা আপনি প্রচুর জেএস-ফাইল (এবং অন্যান্য সংস্থানগুলি) একটি বড় (বা একাধিক) জাভাস্ক্রিপ্ট বান্ডিলগুলিতে বান্ডিল করার জন্য ব্যবহার করতে পারেন। কাজের জন্য আপনার সঠিক সরঞ্জামটি ব্যবহার করা উচিত। এবং আবার, গ্রাপ বা গাল্প থেকে ওয়েবপ্যাক চালানো, ব্রাউজ করা বা অন্যান্য বান্ডেলগুলি চালানো খুব সাধারণ।

— ব্রোডি গারনেট

ওয়েবপ্যাকটি এটি করতে পারে এমন অনেকগুলি উপায় রয়েছে। আপনি file-loaderযেটি মূলত আউটপুট ডিরেক্টরিতে কেবল ফাইল / চিত্র অনুলিপি করতে পারেন এবং আপনার যখন প্রয়োজন হবে তখন ইউআরএল দেয়: আপনি এটি ব্যবহার করতে পারেন var url = require('myFile');। আমি যেমন বলেছি, একটি বান্ডিল এক বা একাধিক ফাইল হতে পারে ।

— ব্রোডি গারনেট

আমি প্যারেন্ট বিল্ড প্রক্রিয়া হিসাবে

— ব্রোকললি

এটা আমার সঠিক উত্তর। বড় / জটিল প্রকল্পগুলিতে ওয়েবপ্যাক বিল্ড পারফরম্যান্স একটি গুরুত্বপূর্ণ বিবেচনা। বিভিন্ন ফাইল অনুলিপি প্লাগইনগুলি ওয়েবপ্যাকের জন্য অপ্রয়োজনীয় ব্যয় যুক্ত করে, ওয়েবপ্যাকটি জেএস বান্ডিলিংয়ে ফোকাস দেওয়া আরও ভাল ধারণা।

— এভি গানের

Answer 5

আপনি সরাসরি আপনার এন্ট্রি কনফিগারেশনে সূচিটি যুক্ত করতে এবং এটি লোড করতে কোনও ফাইল-লোডার ব্যবহার করতে পারেন

module.exports = {

  entry: [
    __dirname + "/index.html",
    .. other js files here
  ],

  module: {
    rules: [
      {
        test: /\.html/, 
        loader: 'file-loader?name=[name].[ext]', 
      },
      .. other loaders
    ]
  }

}

Answer 6

ডিরেক্টরিটিতে ইতিমধ্যে বিদ্যমান index.htmlফাইলটি অনুলিপি distকরতে আপনি কেবলমাত্র টেমপ্লেট হিসাবে উত্স উল্লেখ করে HtmlWebpackPlugin ব্যবহার করতে পারেন ।index.html

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ...
  plugins: [    
    new HtmlWebpackPlugin({
      template: './path/to/index.html',
    })
  ],
  // ...
};

তৈরি dist/index.htmlফাইলটি মূলত আপনার উত্স ফাইলের সাথে একই পার্থক্যের সাথে<script> বান্ডিলযুক্ত সংস্থানসমূহ যেমন। জেএস ফাইলগুলি ওয়েবপ্যাকের মাধ্যমে ট্যাগ দিয়ে ইনজেকশন করা হয় । সংক্ষিপ্তকরণ এবং পরবর্তী বিকল্পগুলি কনফিগার করা যায় এবং গিথুবে নথিভুক্ত হয় ।

Answer 7

এটি উইন্ডোজে ভাল কাজ করে:

1. npm install --save-dev copyfiles
2. ইন package.jsonআমি একটি কপি টাস্ক আছে:"copy": "copyfiles -u 1 ./app/index.html ./deploy"

এটি অ্যাপ্লিকেশন ফোল্ডার থেকে আমার সূচক। Html মোতায়েন ফোল্ডারে স্থানান্তরিত করে।

Comments

আমি সেখানে উত্তর ব্যবহার করে পাবেন: stackoverflow.com/questions/38858718/...

— IsraGab

Answer 8

আপনি যদি কেবল সূচক html নিতে চান তবে @ হবিশুন্টারের উত্তর বাড়ানোর জন্য আপনি কপিপ্লাগিনও ব্যবহার করতে পারেন, অন্যান্য প্যাকেজগুলি ব্যবহার করার ক্ষেত্রে এই পদ্ধতিটি ব্যবহারের মূল প্রেরণা কারণ এটি প্রতিটি একক জন্য অনেকগুলি প্যাকেজ যুক্ত করে এটি কনফিগার করা ইত্যাদি দুঃস্বপ্ন The সবচেয়ে সহজ উপায় হ'ল সবকিছুর জন্য কপিপ্লাগিন ব্যবহার করা:

npm install copy-webpack-plugin --save-dev

তারপর

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  plugins: [
    new CopyPlugin([
      { from: 'static', to: 'static' },
      { from: 'index.html', to: 'index.html', toType: 'file'},
    ]),
  ],
};

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

যদিও এই পদ্ধতিটি সমস্ত কিছুর জন্য উপযুক্ত নয়, এটি সহজ এবং দ্রুত কাজটি সম্পন্ন করবে।

Answer 9

আমিও তা পাওয়া সহজ এবং যথেষ্ট জেনেরিক করার করা আমার index.html ফাইল মধ্যে dist/ তালিকা যোগ <script src='main.js'></script>করতে index.htmlআমার বান্ডেল webpack ফাইল অন্তর্ভুক্ত করতে। ওয়েবপ্যাকের কনফ ফাইলটিতেmain.js অন্য কোনও নির্দিষ্ট না করা থাকলে আমাদের বান্ডেলের ডিফল্ট আউটপুট নাম বলে মনে হচ্ছে । আমার ধারণা এটি ভাল এবং দীর্ঘমেয়াদী সমাধান নয় তবে আমি আশা করি এটি ওয়েবপ্যাক কীভাবে কাজ করে তা বুঝতে সহায়তা করতে পারে to