Webpack.config कैसे बस फ़ोल्डर को index.html कॉपी करें

Question

मैं परिसंपत्तियों को स्वचालित / दूर करने की कोशिश कर रहा हूं। मेरे पास निम्नलिखित config.js है:

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

मैं वेबपेज चलाने के दौरान मेन / डायरेक्टरी से main.html को भी शामिल करना चाहता हूं जो / lib के बगल में / dist फोल्डर में है। मैं यह कैसे कर सकता हूँ?

अद्यतन 1 2017_____________

अब ऐसा करने का मेरा पसंदीदा तरीका html-webpack-pluginटेम्पलेट फ़ाइल के साथ उपयोग करना है । स्वीकृत उत्तर के लिए भी धन्यवाद! इस तरह से लाभ यह है कि इंडेक्स फ़ाइल में बॉक्स से जोड़ा गया cachbusted js लिंक भी होगा!

Answer 1

विकल्प 1

अपनी index.jsफ़ाइल में (यानी वेबपैक प्रविष्टि) फ़ाइल-लोडर प्लगइन के index.htmlमाध्यम से अपनी आवश्यकता जोड़ें , जैसे:

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

एक बार जब आप वेबपैक के साथ अपना प्रोजेक्ट बनाते हैं, index.htmlतो आउटपुट फ़ोल्डर में होगा।

विकल्प 2

सब पर एक index.html होने से बचने के लिए html-webpack-plugin का प्रयोग करें । बस आपके लिए वेबपैक फ़ाइल उत्पन्न करता है।

Comments

क्या मैं किसी तरह से इसे कॉन्फ़िगर फ़ाइल में कुछ लिख कर लोड कर सकता हूं?

— कोडराइन

पहले रास्ते की कोशिश की, और यह फ़ाइलों की नकल की। लेकिन सीएसएस कि मैं कॉपी कर रहा था सही ढंग से काम करना बंद कर दिया। (मैं इसे वेबपैक के लिए बाहरी चाहता था क्योंकि हैंड्सटेबल वेबपैक के साथ काम नहीं कर सकता।)

— वेकैनो

CSS के लिए @Vaccano आपको इस विधि का उपयोग नहीं करना चाहिए। स्टाइल-लोडर और सीएसएस-लोडर का उपयोग करें, यहां देखें: stackoverflow.com/questions/34039826/…

— विटालीबी

Webpack v2 में आप स्पष्ट रूप से -loaderप्रत्यय को छोड़ नहीं सकते हैं । जैसेrequire('file-loader?name=[name].[ext]!../index.html');

— overthink

@codeVerine हां, अपने वेबपैक कॉन्फिग फ़ाइल में { test: /index\.html/, loader: 'file-loader', query: { name: '[name].[ext]' }अपने loadersएरे की तरह कुछ जोड़कर , केवल मैं इसे सर्व करने के लिए वेबपैक-देव-सर्वर प्राप्त नहीं कर सका, जिससे यह काफी मजेदार हो गया, अनुरोध में एक 404 /(रूट मौजूद नहीं है) !)।

— बजे ब्रायन मैककिनटन

Answer 2

मैं VitalyB के उत्तर में एक विकल्प जोड़ूंगा:

विकल्प 3

वाया npm यदि आप npm के माध्यम से अपनी कमांड चलाते हैं, तो आप इस पैकेज को अपने पैकेज में जोड़ सकते हैं । json (webpack.config.js वहां भी देखें)। रन के विकास के लिए npm start, इस मामले में index.html कॉपी करने की कोई जरूरत है क्योंकि वेब सर्वर स्रोत फ़ाइलें निर्देशिका से चलाया जाएगा, और bundle.js (एक ही जगह से उपलब्ध bundle.js स्मृति में रहते हैं होगा ही लेकिन उपलब्ध होगा जैसे कि यह index.html के साथ एक साथ स्थित था)। प्रोडक्शन रन के लिए npm run buildऔर एक डिस्टर्ब फोल्डर में आपका बंडल होगा। js और index.html अच्छे पुराने cp- कमांड के साथ कॉपी हो जाता है, जैसा कि आप नीचे देख सकते हैं:

"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"
  }

अद्यतन: विकल्प ४

इस Stackoverflow जवाब में वर्णित के रूप में एक कॉपी-वेबपैक-प्लगइन है

लेकिन आम तौर पर, बहुत "पहले" फ़ाइल (जैसे index.html) और बड़ी संपत्ति (जैसे बड़ी छवियां या वीडियो) को छोड़कर, सीधे अपने ऐप में css, html, चित्र इत्यादि requireको शामिल करें और वेबपैक आपके लिए इसे शामिल करेगा। (ठीक है, आप लोडर और संभवतः प्लगइन्स के साथ इसे सही ढंग से सेट करने के बाद)।

Comments

विकल्प 3 विकल्प 1 होना चाहिए

— गिल एप्सटेन 19

मैंने विकल्प 3 की कोशिश की, लेकिन index.html का गर्म पुनः लोड करना काम नहीं आया। क्या आप बहुत बार अपने index.html को संपादित नहीं करते हैं? गम्भीर प्रश्न।

— पत्थर

Cp के बजाय ncp का उपयोग करें यदि आप क्रॉस-ओएस देव वातावरण का समर्थन करना चाहते हैं

— विवेक महाराज

Answer 3

आप CopyWebpackPlugin का उपयोग कर सकते हैं । यह इस तरह काम कर रहा है:

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

Comments

अब जबकि वेबपैक ने न केवल बंडलिंग, बल्कि कई अन्य बिल्ड-संबंधी कार्यों को भी करके गुल्प और ग्रंट को बदल दिया है, यह समाधान है जो मैंने ज्यादातर परियोजनाओं में देखा है। इनस्क्रिप्ट का package.jsonउपयोग केवल साधारण चीजों के लिए किया जाता है जैसे टेस्ट रनर या देव सर्वर शुरू करना।

— रॉबर्ट जैक विल

Answer 4

मैं कहूंगा कि उत्तर है: आप नहीं कर सकते। (या कम से कम: आपको नहीं करना चाहिए)। यह वह नहीं है जो वेबपैक करने वाला है। वेबपैक एक बंडल है, और इसका उपयोग अन्य कार्यों के लिए नहीं किया जाना चाहिए (इस मामले में: स्थैतिक फ़ाइलों की प्रतिलिपि बनाना एक अन्य कार्य है)। इस तरह के कार्य करने के लिए आपको ग्रंट या गल्प जैसे उपकरण का उपयोग करना चाहिए। यह एकीकृत करने के लिए बहुत आम है एक ग्रंट कार्य के रूप में Webpack या एक के रूप में Gulp कार्य । वे दोनों आपके पास वर्णित फ़ाइलों की नकल करने के लिए उपयोगी अन्य कार्य हैं, उदाहरण के लिए, ग्रंट-कॉन्ट्री-कॉपी या गुल-कॉपी ।

अन्य परिसंपत्तियों (नहीं index.html) के लिए, आप बस उन्हें वेबपैक के साथ बंडल कर सकते हैं (यह वही है जो वेबपैक के लिए है)। उदाहरण के लिए, var image = require('assets/my_image.png');। लेकिन मैं मानता हूं कि आपकी index.htmlज़रूरत बंडल का हिस्सा नहीं है, और इसलिए यह बंडल के लिए कोई काम नहीं है।

Comments

मैं ठीक से वेबपैक पर गया था इसलिए मुझे ग्रंट या गल्प का उपयोग करने की आवश्यकता नहीं होगी। क्या कोई और विकल्प है? अगर मुझे गुल का उपयोग करने की आवश्यकता है, तो मुझे वेबपैक से क्यों परेशान होना चाहिए?

— SuperUberDuper

सवाल उल्टा है। यदि आप ग्रंट या गल्प का उपयोग कर सकते हैं तो आपको वेबपैक का उपयोग क्यों करना चाहिए? वे बहुत अच्छे कार्य / बिल्ड सिस्टम हैं। Webpack (या Browserify या r.js) ऐसे उपकरण हैं जिनका उपयोग आप बहुत सारी JS-files (और अन्य संसाधनों) को एक बड़े (या एकाधिक) जावास्क्रिप्ट बंडलों में बाँधने के लिए कर सकते हैं। आपको नौकरी के लिए सही उपकरण का उपयोग करना चाहिए। और फिर, ग्रन्ट या गल्प से वेबपैक, ब्राउजर या अन्य बंडलों को चलाना बहुत आम है।

— ब्रॉडी गार्नेट

ऐसे कई तरीके हैं जो वेबपैक कर सकते हैं। आप उपयोग कर सकते हैं file-loaderजो मूल रूप से फ़ाइल / छवि को आउटपुट निर्देशिका में कॉपी करता है और आपको आवश्यकता होने पर आपको url देता है 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फ़ाइल मूल रूप से आपके स्रोत फ़ाइल के अंतर के समान होगी जो कि .js फ़ाइलों<script> जैसे बंडल किए गए संसाधनों को वेबपैक द्वारा टैग के साथ इंजेक्ट की जाती है। न्यूनतमकरण और आगे के विकल्प कॉन्फ़िगर किए जा सकते हैं और इन्हें जीथब पर प्रलेखित किया जाता है ।

Answer 7

यह विंडोज पर अच्छी तरह से काम करता है:

1. npm install --save-dev copyfiles
2. में package.jsonमैं एक प्रति कार्य है:"copy": "copyfiles -u 1 ./app/index.html ./deploy"

यह ऐप फ़ोल्डर से मेरी index.html को फ़ोल्डर में ले जाता है।

Comments

मुझे लगता है कि यह वहाँ जवाब का उपयोग कर काम करता है: stackoverflow.com/questions/38858718/…

— इज़राइल

Answer 8

@ Hobbeshunter के उत्तर का विस्तार करने के लिए यदि आप केवल index.html लेना चाहते हैं, तो आप CopyPlugin का उपयोग भी कर सकते हैं, अन्य पैकेजों का उपयोग करने पर इस पद्धति का उपयोग करने की मुख्य प्रेरणा है क्योंकि यह हर एक प्रकार के लिए कई पैकेजों को जोड़ने और इसे कॉन्फ़िगर करने आदि के लिए एक बुरा सपना है। सबसे आसान तरीका है कि आप सब कुछ के लिए CopyPlugin का उपयोग करें :

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.htmlmain.js