Webpack lancia automaticamente il browser

Question

Gulp + live ricarica serve i miei contenuti su localhost e (ecco cosa sto cercando) avvia automaticamente il browser sull'url del server ogni volta che eseguo il comando gulp (cioè non devo fare clic sull'icona del browser e accedere manualmente all'URL). Questo può essere fatto anche nel Webpack?

Ho provato un plug-in chiamato open-browser-webpack-plugin, ma non ho potuto farlo funzionare.

Answer 1

Per webpack versione 2.x, si aggiunge solo --open aperta al CLI come documentato qui:

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

Answer 2

Ive ha avuto successo utilizzando BrowserSync con Webpack.

In webpack.config.js includo questo:

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

Poiché la maggior parte di noi stanno usando nodo (e NPM) in questi giorni: mettere il comando nello script di avvio NPM:

MAC

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

WINDOWS

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

Grazie a Enzo Ferey per aver sottolineato che ha bisogno di apparire diverso quando su Windows.

Answer 4

In a previous comment, ho notato che la risposta attualmente accettata funziona ma ha l'effetto collaterale di generare un processo che deve essere ucciso manualmente. Da allora ho capito il modo più canonico di avviare un'azione aperta del browser senza utilizzare un plug-in webpack separato.

Detto questo, si ha bisogno di installare un pacchetto NPM più generale: open

quindi creare un nuovo file alla cartella di progetto denominato server.js. Ecco un esempio di implementazione (si noti che è in ES6):

'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); 
}); 

Si noti che questa linea:

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

- significa che è possibile rimuovere la chiamata a webpack-dev-server/client?... da webpack.config.js, come questo comando unshift sarà inserisci la linea in config.entry ... questa è una utile modularizzazione per quando devi configurare un'app con più ambienti e diversi punti di ingresso.

Infine, nel package.json, questo è ciò che il comando start dovrebbe assomigliare: una chiamata a node per eseguire server.js:

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

Answer 5

emelet risposta non è falsa a tutti, tuttavia non funzionerà in Windows . Lo faccio con:

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

100% di lavoro e non è necessario installare alcun modulo o plug-in.