ওয়েবপ্যাক দিয়ে ডিরেক্টরি তৈরি করতে স্থির ফাইলগুলি কীভাবে অনুলিপি করবেন?

Question

আমি থেকে সরাতে চেষ্টা করছি Gulpকরার Webpack। ইন Gulpআমি কাজের যা কপি থেকে সব ফাইল এবং ফোল্ডার আছে / স্ট্যাটিক / ফোল্ডারে / বিল্ড / ফোল্ডার। কিভাবে একই সঙ্গে Webpack? আমার কি কিছু প্লাগইন দরকার?

Comments

গুল্প বোঝার জন্য দুর্দান্ত। শুধু gulpfile.js থেকে webpack কল যদি আপনি চান

— Baryon লি

আপনি যদি লারাভেল মিক্স ব্যবহার করছেন তবে লারাভেল ডক্স / ডকস / ৫.৮ / ২০১৮ / মিক্স# কপি করা- ফাইলস- এবং- ডিরেক্টরিগুলি উপলভ্য।

— রায়ান 18

Answer 1

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

সুতরাং আপনি যদি লিখুন:

var myImage = require("./static/myImage.jpg");

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

var myImage = require("./static/myImage.jpg");
console.log(myImage); // '/build/12as7f9asfasgasg.jpg'

সাধারণত লোডারগুলি ওয়েবপ্যাক কনফিগারেশনের মাধ্যমে প্রয়োগ করা হয়:

// webpack.config.js

module.exports = {
    ...
    module: {
        loaders: [
            { test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3)$/, loader: "file" }
        ]
    }
};

অবশ্যই এই কাজটি করার জন্য আপনাকে প্রথমে ফাইল-লোডার ইনস্টল করতে হবে।

Comments

" অবশ্যই এই কাজটি করার জন্য আপনাকে প্রথমে ফাইল-লোডার ইনস্টল করতে হবে " " এখানে উল্লিখিত" ফাইল-লোডার "এর সাথে লিঙ্ক করুন । আর এখানে ইনস্টল এবং এটা কীভাবে ব্যবহার করবেন তা নয়।

— নট

আপনার এখনও এইচটিএমএল ফাইলগুলির সমস্যা আছে এবং সেগুলির মধ্যে সমস্ত উল্লেখ লোড হচ্ছে না।

— কিলিয়ান

হ্যাঁ, আপনি যদি ওয়েবপ্যাক প্লাগইনগুলির নরকে যেতে চান তবে আপনি ফাইল-লোডার, সিএসএস-লোডার, স্টাইল-লোডার, ইউআরএল-লোডার, ... ব্যবহার করতে পারেন এবং তারপরে আপনার প্রয়োজন মতো কনফিগার করার জন্য আপনার দুর্দান্ত সময় থাকতে পারে এবং গুগলিং এবং ঘুমন্ত নয় :) বা আপনি অনুলিপি-ওয়েবপ্যাক-প্লাগইন ব্যবহার করতে পারেন এবং আপনার কাজটি সম্পন্ন করতে পারেন ...

— কামিল টোমাক

@ কামিলটমেক তাই আপনার প্রস্তাবটি হ'ল ওয়েবপ্যাক প্লাগইনগুলি এড়াতে আমাদের একটি ওয়েবপ্যাক প্লাগইন ব্যবহার করা উচিত? (

— খালি

ঠিক আছে, সমস্ত চিত্রের বেশিরভাগ অংশ CSS এবং এইচটিএমএল-তে থাকে। সুতরাং আমার জেএস ফাইলগুলিতে এই সমস্ত চিত্রের প্রয়োজন হওয়া উচিত ('img.png') ব্যবহার করে; এটি ফাইল-লোডার দিয়ে কাজ করতে? এটা বেশ পাগল জিনিস।

— রানটিভ

Answer 2

ফাইল-লোডার মডিউলটি ব্যবহার করে সম্পদের প্রয়োজন হ'ল ওয়েবপ্যাকটি যেভাবে ব্যবহার করার উদ্দেশ্যে ( উত্স )। তবে আপনার যদি আরও নমনীয়তার প্রয়োজন হয় বা একটি ক্লিনার ইন্টারফেস চান, আপনি আমার copy-webpack-plugin( এনপিএম , গিথুব ) ব্যবহার করে সরাসরি স্ট্যাটিক ফাইলগুলি অনুলিপি করতে পারেন । আপনার জন্য staticকরতে buildউদাহরণ:

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

module.exports = {
    context: path.join(__dirname, 'your-app'),
    plugins: [
        new CopyWebpackPlugin([
            { from: 'static' }
        ])
    ]
};

Comments

আপনি যখন কোনও সম্পূর্ণ ডিরেক্টরি অনুলিপি করতে চান (তখন স্ট্যাটিক এইচটিএমএল এবং অন্যান্য বয়লারপ্লেট চিত্রগুলি) এটি এত সহজ!

— অর্জুন মেহতা

কৌতুকটি করেছেন, আপনাকে ধন্যবাদ :) খুব সাধারণ কমান্ডটি করার জন্য বেশ কয়েকটি ব্যর্থ চেষ্টা করার পরে ফাইল লোডারকে ছেড়ে দিয়েছিল। আপনার প্লাগইন প্রথমবার কাজ করেছে।

— আর্সেল্ডন

@ ইয়ান প্লাগইন ফাইলগুলি পরিবর্তিত হলে (ডেভ-সার্ভার বা ওয়েবপ্যাক - ওয়াচ) পুনরায় অনুলিপি করে। যদি এটি আপনার জন্য অনুলিপি না করে থাকে তবে দয়া করে একটি সমস্যা ফাইল করুন।

— কেভেল্নেড

আমি ওয়েবপ্যাকে নতুন, তবে আমাদের কেবল ফাইল-লোডার / ইউআরএল-লোডার / আইএমজি-লোডার ব্যবহার করার প্রয়োজন কেন তা বুঝতে খুব কষ্ট হচ্ছে? ফাইল-লোডার দিয়ে এটি করার মাধ্যমে আমরা কী লাভ করব?

— ব্রেকডিস

যেহেতু আপনি প্লাগইন লেখক। এই প্রশ্ন জিজ্ঞাসা করার জন্য আর ভাল গতি নেই। "কপিরাইট-ওয়েবপ্যাক-প্লাগইন" প্লাগইন ব্যবহার করে ... আমি উত্স ডিরেক্টরি থেকে ফাইলগুলি ফিল্টার করতে পারি যাতে এটি কেবলমাত্র নির্দিষ্ট ফাইল এক্সটেনসিয়োনের সাথে ফাইলটি অনুলিপি করে। শুধুমাত্র ".html" কপি করবেন? শুভেচ্ছা সহ

— DevWL

Answer 3

আপনি যদি আপনার স্থির ফাইলগুলি অনুলিপি করতে চান তবে আপনি ফাইল-লোডারটি এইভাবে ব্যবহার করতে পারেন:

এইচটিএমএল ফাইলগুলির জন্য:

ওয়েবপ্যাক.কমফিগ.জেজে:

module.exports = {
    ...
    module: {
        loaders: [
            { test: /\.(html)$/,
              loader: "file?name=[path][name].[ext]&context=./app/static"
            }
        ]
    }
};

আপনার জেএস ফাইলটিতে:

  require.context("./static/", true, /^\.\/.*\.html/);

./static/ আপনার js ফাইলের সাথে সম্পর্কিত।

আপনি ইমেজ বা যা কিছু সঙ্গে একই করতে পারেন। প্রসঙ্গটি এক্সপ্লোর করার একটি শক্তিশালী পদ্ধতি !!

Comments

আমি এই পদ্ধতিটি অনুলিপি-ওয়েবপ্যাক-প্লাগইন মডিউলটির চেয়ে বেশি পছন্দ করি। অতিরিক্তভাবে, আমি আমার ওয়েবপ্যাক কনফিগারেশনে "& প্রসঙ্গ =। / অ্যাপ্লিকেশন / স্ট্যাটিক" ব্যবহার না করে এটিকে কাজ করতে সক্ষম হয়েছি। আমার কেবলমাত্র প্রয়োজনীয় কোডেক্সট লাইন দরকার।

— ডেভ ল্যান্ড্রি

আমি এটি চেষ্টা করছি, এটি দুর্দান্ত লাগছে তবে একটি ছোট্ট সমস্যার জন্য আমি যা পাচ্ছি, যা এটি আমার index.htmlউপ-ডিরেক্টরিতে প্রবেশ করছে যা এটি তৈরি করছে _(আন্ডারস্কোর), কী হচ্ছে?

— ক্রিস

আপনি যখন "আপনার জেএস ফাইলে" বলছেন তখন আপনার অর্থ কী? আমার কাছে জেএস ফাইল না থাকলে কী হবে?

— বিবর্তনবক্স 8

একেবারে। এন্ট্রি স্ক্রিপ্টের এই এক লাইন, অর্থাৎ ফোল্ডারের main.jsমধ্যে সমস্ত কিছু আমদানি করছে static:require.context("./static/", true, /^.*/);

— মারিও

এটি একটি ঝরঝরে হ্যাক তবে আপনি যদি খুব বেশি ফাইল অনুলিপি করেন তবে আপনার স্মৃতিশক্তি শেষ হয়ে যাবে।

— টম

Answer 4

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

Answer 5

উপরোক্ত পরামর্শগুলি ভাল। তবে সরাসরি আপনার প্রশ্নের উত্তর দেওয়ার চেষ্টা করার জন্য আমি cpy-cliআপনার মধ্যে সংজ্ঞায়িত কোনও স্ক্রিপ্টে ব্যবহার করার পরামর্শ দেব package.json।

এই উদাহরণটি nodeআপনার পথে কোথাও প্রত্যাশা করে। cpy-cliবিকাশ নির্ভরতা হিসাবে ইনস্টল করুন :

npm install --save-dev cpy-cli

তারপরে কয়েকটি নোডেজ ফাইল তৈরি করুন। একটি অনুলিপি করতে এবং অন্যটি একটি চেকমার্ক এবং বার্তা প্রদর্শন করতে।

copy.js

#!/usr/bin/env node

var shelljs = require('shelljs');
var addCheckMark = require('./helpers/checkmark');
var path = require('path');

var cpy = path.join(__dirname, '../node_modules/cpy-cli/cli.js');

shelljs.exec(cpy + ' /static/* /build/', addCheckMark.bind(null, callback));

function callback() {
  process.stdout.write(' Copied /static/* to the /build/ directory\n\n');
}

checkmark.js

var chalk = require('chalk');

/**
 * Adds mark check symbol
 */
function addCheckMark(callback) {
  process.stdout.write(chalk.green(' ✓'));
  callback();
}

module.exports = addCheckMark;

স্ক্রিপ্টটি যুক্ত করুন package.json। ধরে নিচ্ছি স্ক্রিপ্টগুলি রয়েছে<project-root>/scripts/

...
"scripts": {
  "copy": "node scripts/copy.js",
...

Sript চালানোর জন্য:

npm run copy

Comments

ওপি এনপিএম স্ক্রিপ্ট ব্যবহার না করে ওয়েবপ্যাকের অভ্যন্তরে ফাইলটি সরাতে চেয়েছিল?

— উইলিয়াম এস

এমনকি ওপি যখন ওয়েবপ্যাকটির অভ্যন্তরে এটি সমাধান করতে চেয়েছিল, তখনও সম্ভব হয় তিনি এনপিএমের মাধ্যমে ওয়েবপ্যাকটি চালাচ্ছেন, তাই তিনি এটি তার বিল্ড স্ক্রিপ্টে যুক্ত করতে পারেন যেখানে ওয়েবপ্যাকটি চালিত হয়

— পিরো বলেছেন

Answer 6

সম্ভবত আপনার কপিরউইবপ্যাক প্লাগইন ব্যবহার করা উচিত যা কেভলিন্ড উত্তরে উল্লিখিত ছিল। Html বা .json এর মতো কিছু ধরণের ফাইলের জন্য পর্যায়ক্রমে আপনি কাঁচা-লোডার বা জেসন-লোডারও ব্যবহার করতে পারেন। এটির মাধ্যমে ইনস্টল করুন npm install -D raw-loaderএবং তারপরে আপনাকে কেবল যা করতে হবে তা হ'ল আমাদের webpack.config.jsফাইলটিতে অন্য একটি লোডার যুক্ত করা ।

ভালো লেগেছে:

{
    test: /\.html/,
    loader: 'raw'
}

দ্রষ্টব্য: যে কোনও কনফিগার পরিবর্তন কার্যকর হওয়ার জন্য ওয়েবপ্যাক-ডেভ-সার্ভার পুনরায় চালু করুন।

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

template: require('./nav.html')  

Answer 7

আমি স্থিতিটি লোড করার উপায় imagesএবং fonts:

module: {
    rules: [
      ....

      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        /* Exclude fonts while working with images, e.g. .svg can be both image or font. */
        exclude: path.resolve(__dirname, '../src/assets/fonts'),
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'images/'
          }
        }]
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg|otf)(\?v=\d+\.\d+\.\d+)?$/,
        /* Exclude images while working with fonts, e.g. .svg can be both image or font. */
        exclude: path.resolve(__dirname, '../src/assets/images'),
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'fonts/'
          },
        }
    ]
}

file-loaderকাজ করতে ইনস্টল করতে ভুলবেন না ।

Comments

আপনি কীভাবে সদৃশ ফাইলের নামগুলি পরিচালনা করবেন? বা আরও ভাল, আপনি কি নতুন আউটপুট ডিরেক্টরিতে মূল পাথ সংরক্ষণের কোনও উপায় জানেন?

— ক্যানচোট

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

— রেগারবয়

যদি আপনি উপাদান ভিত্তিক বিকাশ বাস্তবায়ন করেন (যার মূল নীতিগুলির মধ্যে একটি হ'ল এনক্যাপুলেশন এবং আরও বিশেষত এই ক্ষেত্রে তথ্য গোপন করা ) তবে আপনি যা উল্লেখ করেছেন তার কোনওটিই প্রাসঙ্গিক নয়। উদাহরণস্বরূপ, যখন কেউ প্রোগ্রামটিতে একটি নতুন উপাদান যুক্ত করে তখন তাদের অন্য কোনও চিত্রের নাম আছে কিনা logo.pngতা খতিয়ে দেখার দরকার নেই এবং তাদের বিশ্বব্যাপী সংঘর্ষ এড়াতে একটি অভ্যাস এবং "আশাবাদী" অনন্য ফাইল নাম তৈরি করতে হবে না। একই কারণে আমরা সিএসএস মডিউল ব্যবহার করি ।

— ক্যানটুকেট

আমি কেন চিত্রগুলি মূল পথ এবং ফাইলের নাম বজায় রাখতে চাই; বেশিরভাগ ডিবাগিং, একই কারণে আপনি উত্সম্যাপগুলি ব্যবহার করবেন তবে এসইও করুন । নির্বিশেষে, আমার প্রশ্নের উত্তরটি আসলে খুব সহজ ছিল ... [path][name].[ext]এবং নির্দিষ্ট পরিবেশ বা ক্ষেত্রে ব্যবহারের জন্য এটি পরিবর্তন করার জন্য প্রচুর নমনীয়তা সরবরাহ করা হয়েছে ... ফাইল-লোডার

— ক্যান্টুয়েট

বলা হচ্ছে যে আমরা আপনার উদাহরণের একটি বৈকল্পিকতা প্রয়োগ করেছি তাই সরবরাহ করার জন্য আপনাকে ধন্যবাদ!

— ক্যানটুকেট

Answer 8

আপনি আপনার প্যাকেজ.জসনে বাশ লিখতে পারেন:

# package.json
{
  "name": ...,
  "version": ...,
  "scripts": {
    "build": "NODE_ENV=production npm run webpack && cp -v <this> <that> && echo ok",
    ...
  }
}

Comments

উইন্ডোজে, কেবল "build": "webpack && xcopy images dist\\images\\ /S /Y && xcopy css dist\\css\\ /S /Y"

— সিপির

ঠিক আছে, সুতরাং আপনার সমাধানটি প্রতিটি ওএসের জন্য আলাদা স্ক্রিপ্ট থাকা উচিত?

— ম্যাকিয়েজ গুরবান

হ্যাঁ, আমার জন্য প্রতিটি ওএসের জন্য একটি স্ক্রিপ্ট গ্রহণযোগ্য (এটি সত্যই ইউনিক্স / নন-ইউনিক্স, যেহেতু লিনাক্সের লিপি

— স্ক্রিনটি

এবং উইন্ডোজ উদাহরণটি পাওয়ারশেলের সাথে ডিফল্ট শেল হিসাবে কাজ করবে না।

— জুলিয়ান নাইট

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

— এলিয়েন টেকনোলজি

Answer 9

আমিও এখানে আটকে ছিলাম। কপি-ওয়েবপ্যাক-প্লাগইন আমার জন্য কাজ করেছে।

তবে, 'কপি-ওয়েবপ্যাক-প্লাগইন' আমার ক্ষেত্রে প্রয়োজনীয় ছিল না (আমি পরে শিখেছি)।

webpack উপেক্ষা করে রুট পাথ
উদাহরণস্বরূপ

<img src="/images/logo.png'>

সুতরাং, 'অনুলিপি-ওয়েবপ্যাক-প্লাগইন ব্যবহার না করেই এই কাজটি করতে' make 'পথে ব্যবহার করুন

<img src="~images/logo.png'>

'images' ওয়েবপ্যাকটিকে 'চিত্রগুলি' মডিউল হিসাবে বিবেচনা করতে বলে

দ্রষ্টব্য: আপনাকে চিত্রের ডিরেক্টরি প্যারেন্ট ডিরেক্টরি যুক্ত করতে হতে পারে

resolve: {
    modules: [
        'parent-directory of images',
        'node_modules'
    ]
}

পরিদর্শন https://vuejs-templates.github.io/webpack/static.html

Answer 10

ওয়েবপ্যাক কনফিগারেশন ফাইল (ওয়েবপ্যাক ২ এ) আপনাকে প্রতিশ্রুতি শৃঙ্খলা রফতানি করার অনুমতি দেয়, যতক্ষণ না শেষ পদক্ষেপটি একটি ওয়েবপ্যাক কনফিগার অবজেক্ট দেয়। প্রতিশ্রুতি কনফিগারেশন ডক্স দেখুন । সেখান থেকে:

ওয়েবপ্যাক এখন কনফিগারেশন ফাইল থেকে প্রতিশ্রুতি ফেরত সমর্থন করে। এটি আপনার কনফিগারেশন ফাইলে অ্যাসিঙ্ক প্রসেসিং করতে দেয়।

আপনি একটি সাধারণ পুনরাবৃত্তির অনুলিপি ফাংশন তৈরি করতে পারেন যা আপনার ফাইলটি অনুলিপি করে এবং তারপরেই ওয়েবপ্যাকটি ট্রিগার করে। উদাহরণ:

module.exports = function(){
    return copyTheFiles( inpath, outpath).then( result => {
        return { entry: "..." } // Etc etc
    } )
}

Answer 11

আসুন আপনার সমস্ত স্থিতিশীল সম্পদগুলি মূল স্তরের "স্ট্যাটিক" ফোল্ডারে রয়েছে এবং আপনি সেগুলি সাবফোল্ডারের কাঠামো বজায় রেখে বিল্ড ফোল্ডারে অনুলিপি করতে চান, তারপরে আপনার এন্ট্রি ফাইলে) কেবল লিখুন

//index.js or index.jsx

require.context("!!file?name=[path][name].[ext]&context=./static!../static/", true, /^\.\/.*\.*/);