Webpack Start-Browser automatisch

Question

Gulp + live reload serviert meine Inhalte auf localhost und (hier ist, was ich danach bin) startet den Browser automatisch auf der Server-URL, wenn ich den Schluck Befehl ausführen (dh ich muss nicht Klicken Sie auf das Browser-Symbol und navigieren Sie manuell zur URL. Kann dies auch in Webpack gemacht werden?

Ich habe ein Plugin namens Open-Browser-Webpack-Plugin versucht, aber ich konnte es nicht zum Laufen bringen.

Answer 1

Für Webpack Version 2.x, Sie fügen Sie einfach --open offen für die CLI wie hier dokumentiert:

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

Answer 2

Ive hatte Erfolg mit BrowserSync mit Webpack.

In webpack.config.js I sind dies:

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

Da die meisten von uns sind mit Knoten (und NPM) in diesen Tagen: setzen Sie den Befehl im npm Startskript:

MAC

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

WINDOWS

Danke an Enzo Ferey für den Hinweis, dass es unter Windows anders aussehen muss.

Answer 4

In a previous comment, habe ich festgestellt, dass die derzeit akzeptierte Antwort funktioniert, aber es hat die Nebenwirkung, einen Prozess zu erzeugen, der manuell getötet werden muss. Ich habe seitdem die kanonischere Art herausgefunden, eine Browser-Open-Action zu initiieren, ohne ein separates Webpack-Plugin zu verwenden.

Das heißt, Sie brauchen eine allgemeinere npm Paket zu installieren: open

Dann erstellen Sie eine neue Datei in Ihrem Projektordner server.js benannt. Hier ist eine Beispielimplementierung (beachten Sie, dass es in ES6 ist):

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

Beachten Sie, dass diese Zeile:

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

- Bedeutet, können Sie den Anruf zu webpack-dev-server/client?... von webpack.config.js, wie dieser unshift Befehl entfernen wird Fügen Sie die Zeile in config.entry ... Dies ist eine hilfreiche Modularisierung für, wenn Sie eine App mit mehreren Umgebungen und verschiedenen Einstiegspunkten einrichten müssen.

schließlich in package.json, ist es das, was der start Befehl soll wie folgt aussehen: ein Aufruf an node läuft server.js:

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

Answer 5

Emelet Antwort ist nicht falsch überhaupt, aber es wird nicht in Windows arbeiten . Ich mache das mit:

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

100% funktioniert und Sie müssen kein Modul oder Plugin installieren.