Webpack-dev-server फ़ाइलों को संकलित करता है, लेकिन ब्राउज़र में संकलित जावास्क्रिप्ट को रीफ्रेश या उपलब्ध नहीं करता है

Question 1

मैं फ़ाइलों को संकलित करने और एक देव वेब सर्वर को शुरू करने के लिए वेबपैक-देव-सर्वर का उपयोग करने की कोशिश कर रहा हूं।

मेरे package.jsonपास मेरे पास स्क्रिप्ट संपत्ति है:

"scripts": {
  "dev": "webpack-dev-server --hot --inline",
 }

तो --hotऔर --inlineवेब सर्वर और गर्म पुन: लोड सक्षम होना चाहिए (के रूप में मैं इसे समझ)।

मेरी webpack.config.jsफ़ाइल में मैंने फ़ाइल में परिवर्तन देखने के लिए प्रविष्टि, आउटपुट और डिस्वर्स सेटिंग के साथ-साथ लोडर भी जोड़ा .vue:

module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname + '/public',
        publicPath: '/public',
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    devServer:{
        contentBase: __dirname + '/public'
    },
    module:{
        loaders:[
            { test: /\.vue$/, loader: 'vue'}
        ]
    }
};

इसलिए इस सेटअप के साथ, मैं चलाता हूं npm run dev। वेबपैक-देव-सर्वर शुरू होता है, मॉड्यूल लोडर परीक्षण कार्य करता है (अर्थात जब मैं कोई भी सहेजता हूं। यह फ़ाइल recompile का कारण बनता है), लेकिन:

ब्राउज़र कभी भी ताज़ा नहीं होता है
संकलित जावास्क्रिप्ट, जो मेमोरी में संग्रहीत हो जाती है, कभी भी ब्राउज़र को उपलब्ध नहीं कराई जाती है

उस दूसरी बुलेट पर, मैं इसे देख सकता हूं क्योंकि ब्राउज़र विंडो में vue प्लेसहोल्डर्स को कभी भी प्रतिस्थापित नहीं किया जाता है और अगर मैं जावास्क्रिप्ट कंसोल को खोलता हूं तो Vue इंस्टेंस कभी भी ग्लोबली उपलब्ध या निर्मित नहीं होता है।

मैं क्या खो रहा हूँ?

Question 2

दो बातें मेरी समस्याओं का कारण बन रही थीं:

module.exports = {
    entry: './src/index.js',
    output: {

        // For some reason, the `__dirname` was not evaluating and `/public` was
        // trying to write files to a `public` folder at the root of my HD.
        path: __dirname + '/public', 

        // Public path refers to the location from the _browser's_ perspective, so 
        // `/public' would be referring to `mydomain.com/public/` instead of just
        // `mydomain.com`.
        publicPath: '/public',
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    devServer:{

        // `contentBase` specifies what folder to server relative to the 
        // current directory. This technically isn't false since it's an absolute
        // path, but the use of `__dirname` isn't necessary. 
        contentBase: __dirname + '/public'
    },
    module:{
        loaders:[
            { test: /\.vue$/, loader: 'vue'}
        ]
    }
};

यहाँ तय है webpack.config.js:

var path = require('path');

module.exports = {
    entry: [
        './src/PlaceMapper/index.js'
    ],
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'public/')
    },
    devtool: 'source-map',
    devServer:{
        contentBase: 'public'
    },
    module:{
        loaders:[
            { test: /\.vue$/, loader: 'vue'}
        ]
    }
};

Question 3

एक लंबी खोज के बाद मुझे अपनी समस्या का हल मिल गया, मेरे मामले में आउटपुट पथ सही तरीके से कॉन्फ़िगर नहीं किया गया था।

इस विन्यास ने मेरी समस्या हल कर दी:

const path = require('path');

module.exports = {
  "entry": ['./app/index.js'],
  "output": {
    path: path.join(__dirname, 'build'),
    publicPath: "/build/",
    "filename": "bundle.js"
  }....

Question 4

सही समाधान

बताओ dev-serverकरने के लिए देखने के द्वारा कार्य किया फ़ाइलों devServer.watchContentBase विकल्प।

यह डिफ़ॉल्ट रूप से अक्षम होता है।

सक्षम होने पर, फ़ाइल परिवर्तन एक पूर्ण पृष्ठ पुनः लोड हो जाएगा ।

उदाहरण:

module.exports = {
  //...
  devServer: {
    // ...
    watchContentBase: true
  }
};

Question 5

मुझे भी यही समस्या थी और मुझे लगता है कि उन सभी बिंदुओं के अलावा, हमें index.html को भी एक ही फ़ोल्डर में आउटपुट बंडल .js के साथ डालना होगा और सामग्री को इस फ़ोल्डर में सेट करना होगा, या तो रूट या सबफ़ोल्डर ।

Question 6

किसी तरह, मेरे मामले के लिए, "--hot" को हटाने से यह काम करता है। तो, मैंने हटा दियाhot: true

webpack.dev.js

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    publicPath: '/js/',
    contentBase: path.resolve(__dirname, 'docs'),
    watchContentBase: true,
  }
});

webpack.common.js

  output: {
    path: path.resolve(__dirname, 'docs/js'),
    filename: '[name].min.js',
    library: ['[name]']
  },

Question 7

यह ExtractTextPlugin के कारण हो सकता है । विकास मोड में ExtractTextPlugin निष्क्रिय करें। इसका उपयोग केवल उत्पादन निर्माण के लिए करें।

Question 8

यह मेरे साथ ही webpack-dev-serverएक के बाद एक पोर्ट पर दो अलग-अलग एप्लिकेशन चलाने के बाद हुआ । यह तब भी हुआ जब अन्य परियोजना बंद हो गई थी। जब मैं एक बंदरगाह में बदल गया जिसका उपयोग नहीं किया गया था तो यह सीधे काम करना शुरू कर दिया।

devServer: {
    proxy: {
        '*': {
            target: 'http://localhost:1234'
        }
    },
    port: 8080,
    host: '0.0.0.0',
    hot: true,
    historyApiFallback: true,
},

अगर आप मेरी तरह क्रोम का उपयोग करते हैं तो बस खोलें Developer Toolsऔर क्लिक करें Clear site data। आप यह भी देख सकते हैं कि साइट को गुप्त मोड में चलाकर समस्या है या नहीं।

Question 9

मेरा मामला यह था कि मैं वेबपैक फीचर्स के साथ प्रयोग करने में इतनी गहरी हो गई, लेकिन पूरी तरह से भूल गई कि मैंने पूरे समय के लिए झूठे होने का इंजेक्शन लगाया था ...

 new HTMLWebpackPlugin({
        inject: false,
        ...
 }),

उस पर स्विच करना मेरा टिकट था।

Question 10

मैंने एक ऐसी ही स्थिति का अनुभव किया जहां मैं webpack-dev-serverअपनी index.htmlफ़ाइल परोस रहा था लेकिन अपडेट नहीं कर रहा था । कुछ पोस्ट पढ़ने के बाद मैंने महसूस किया कि webpack-dev-serverएक नई js फ़ाइल उत्पन्न नहीं होती है, बल्कि एक को इंजेक्ट करता है index.html।

मैंने html-webpack-pluginअपने एप्लिकेशन में और अपनी webpack.config.jsफ़ाइल में निम्न कॉन्फ़िगरेशन के साथ जोड़ा :

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

plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    })
  ]

फिर मैंने अपनी प्रविष्टि js फ़ाइल को संदर्भित करते हुए स्क्रिप्ट टैग पर टिप्पणी की index.html। मैं अब webpack-dev-serverकिसी भी अतिरिक्त झंडे के बिना चला सकता हूं और मेरी फ़ाइलों में कोई भी परिवर्तन तुरंत ब्राउज़र में दिखाई देगा।

Question 11

मैं --watchयहाँ दुख की दीवार के लिए वेबपैक शोक की अपनी विशेष कहानी जोड़ूंगा ।

मैं दौड़ रहा था

webpack --watch

एक टाइपस्क्रिप्ट प्रोजेक्ट बनाने के लिए। संकलित .jsफ़ाइलें अपडेट होतीं, लेकिन जो बंडल ब्राउज़र देख रहा था वह नहीं होगा। इसलिए मैं मूल रूप से ओपी के समान स्थिति में था।

मेरी समस्या watchOptions.ignoredपैरामीटर पर आ गई । बिल्ड कॉन्फ़िगरेशन के मूल लेखक ने ignoredफ़िल्टर फ़ंक्शन के रूप में सेट किया था , जो उस पैरामीटर के लिए मान्य मान नहीं निकला। फ़िल्टर फ़ंक्शन को एक उपयुक्त के साथ बदलने से मेरे लिए फिर से निर्माण कार्य हो RegExpगया --watch।

Question 12

आपका प्रोजेक्ट ट्री स्पष्ट नहीं है, हालाँकि समस्या कंटेंटबेस सेटिंग में हो सकती है। कंटेंट सेट करने का प्रयास करें: __dirname