Webpack लांच ब्राउज़र अपने

Question

Gulp + लाइव पुनः लोड अप मेरी सामग्री स्थानीय होस्ट पर कार्य करता है और (यहाँ मैं क्या करने के बाद हूँ) जब भी मैं घूंट आदेश चला सर्वर यूआरएल पर स्वचालित रूप से ब्राउज़र की शुरूआत (यानी मैं की जरूरत नहीं है ब्राउज़र आइकन पर क्लिक करें और मैन्युअल रूप से यूआरएल पर नेविगेट करें)। क्या यह वेबपैक में भी किया जा सकता है?

मैंने ओपन-ब्राउजर-वेबपैक-प्लगइन नामक एक प्लगइन की कोशिश की है, लेकिन मैं इसे काम नहीं कर सका।

Answer 1

वेबपैक संस्करण 2 के लिए।एक्स, तो आप सिर्फ --open खुला के रूप में यहाँ प्रलेखित जोड़ने CLI रहे हैं:

https://webpack.js.org/configuration/dev-server/#devserver-open

Answer 2

Ive को वेबपैक के साथ BrowserSync का उपयोग करके सफलता मिली।

webpack.config.js में मैं इस में शामिल हैं:

var options = { 
    port: 9001, 
    host: 'localhost', 
    server: { 
     baseDir: './public' 
    }, 
    ui: { 
     port: 9002 
    }, 
    startPath: process.argv[3].substr(2), 
} 

var browserSync = require('browser-sync'); 
browserSync(['public/**/*.*'],options); 

Answer 3

के बाद से हम में से ज्यादातर नोड (और NPM) का उपयोग कर रहे इन दिनों:

मैक: NPM शुरू लिपि में आदेश डाल

"scripts": { 
    "start": "webpack-dev-server & open http://localhost:8080/" 
    } 

WINDOWS

"scripts": { 
    "start": "start http://localhost:8000/ & webpack-dev-server" 
} 

इंजो फेरे के लिए धन्यवाद यह इंगित करने के लिए कि विंडोज़ पर इसे अलग दिखने की जरूरत है।

Answer 4

In a previous comment, मैंने नोट किया कि वर्तमान में स्वीकृत उत्तर काम करता है लेकिन इसका एक प्रभाव उत्पन्न करने का दुष्प्रभाव है जिसे मैन्युअल रूप से मारने की आवश्यकता है। मैंने तब से एक अलग वेबपैक प्लगइन का उपयोग किए बिना ब्राउज़र ओपन एक्शन शुरू करने के अधिक कैनोलिक तरीके का पता लगाया है।

कहा कि, आप एक अधिक सामान्य NPM पैकेज स्थापित करने की आवश्यकता है: open

फिर server.js नामित अपने प्रोजेक्ट फ़ोल्डर में एक नई फ़ाइल बनाना।

'use strict'; 
const webpack = require('webpack'); 
const WebpackDevServer = require('webpack-dev-server'); 
const config = require('./webpack.config'); 


const open = require('open'); 
const port_number = 8080; 

let target_entry = 'http://localhost:' + port_number + '/'; 
config.entry.unshift("webpack-dev-server/client?" + target_entry); 

new WebpackDevServer(webpack(config), {contentBase: 'src', hot: true, stats: { colors: true }, publicPath: '/assets/'}) 
.listen(port_number, 'localhost' , (err) => { 
    if (err) { 
    console.log(err); 
    } 
    console.log('Listening at localhost:' + port_number); 
    console.log('Opening your system browser...'); 
    open(target_entry); 
}); 

नोट इस लाइन है कि: यहां नमूने के कार्यान्वयन (ध्यान दें कि यह ES6 में है) है

config.entry.unshift("webpack-dev-server/client?" + target_entry); 

- इसका मतलब है आप webpack.config.js से webpack-dev-server/client?... करने के लिए कॉल को हटा सकते हैं इस unshift आदेश के रूप में, होगा config.entry में लाइन डालें ... यह एक उपयोगी मॉड्यूलरेशन है जब आपको एकाधिक वातावरण और विभिन्न प्रविष्टि बिंदुओं के साथ एक ऐप सेट अप करने की आवश्यकता होती है।

अंत में, package.json में, यह क्या start आदेश की तरह दिखना चाहिए है: node के लिए एक कॉल server.js को चलाने के लिए:

"scripts": { 
    "start": "node server.js", 
    //... 
    } 

Answer 5

Emelet जवाब बिल्कुल झूठी नहीं है, लेकिन यह विंडोज में काम नहीं करेगा । मैं इसके साथ ऐसा करता हूं:

"scripts": { 
    "start": "start http://localhost:8000/ & webpack-dev-server" 
} 

100% काम कर रहा है और आपको कोई मॉड्यूल या प्लगइन स्थापित करने की आवश्यकता नहीं है।