it-swarm.com.de

Webpack-Browser automatisch starten

Gulp + live reload liefert meine Inhalte auf localhost und (hier ist das, wonach ich strebe) startet den Browser automatisch an der Server-URL , wenn ich den gulp-Befehl ausführe (dh ich muss nicht auf das Browsersymbol und klicken navigieren Sie manuell zur URL). Kann man das auch im Webpack machen?

Ich habe ein Plugin namens open-browser-webpack-plugin ausprobiert, konnte es aber nicht zum Laufen bringen.

25
swelet

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

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

39
HDave

Die Antwort von Emelet ist überhaupt nicht falsch, funktioniert jedoch nicht in Windows. Ich mache das mit: 

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

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

8
Enzo Ferey

Da die meisten von uns heutzutage Knoten (und npm) verwenden, setzen Sie den Befehl in das npm-Startskript:

MAC

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

WINDOWS

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

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

6
swelet

In einem vorherigen Kommentar habe ich festgestellt, dass die derzeit akzeptierte Antwort funktioniert, aber sie hat den Nebeneffekt, dass ein Prozess gestartet wird, der manuell abgebrochen werden muss. Ich habe seither die kanonischere Art herausgefunden, eine Browser-Öffnungsaktion ohne Verwendung eines separaten Webpack-Plugins zu initiieren.

Das heißt, Sie müssen ein allgemeineres npm-Paket installieren: open

Erstellen Sie dann eine neue Datei in Ihrem Projektordner mit dem Namen server.js. Hier eine Beispielimplementierung (beachten Sie, dass es sich in ES6 befindet):

'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, dass Sie den Aufruf von webpack-dev-server/client?... von webpack.config.js entfernen können, da dieser unshift-Befehl die Zeile in config.entry... einfügt. Dies ist eine nützliche Modularisierung, wenn Sie eine App mit mehreren Umgebungen und verschiedenen Einstiegspunkten einrichten möchten.

Schließlich sollte der Befehl start in package.json folgendermaßen aussehen: Ein Aufruf von node zum Ausführen von server.js:

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

Um den Browser zu starten, können Sie dem CLI-Befehl --open hinzufügen, wenn die akzeptierte Antwort darauf hinweist

npm start --open

oder 

ng serve --open

Um dies nicht zu vermeiden, müssen Sie in package.json eine einfache Änderung vornehmen.

"scripts": {
    "ng": "ng",
    "start": "ng serve --open",
    ...
  },
4
edkeveked

Ich hatte Erfolg mit BrowserSync mit Webpack.

In webpack.config.js füge ich Folgendes hinzu:

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);
1
timthez

Starten Sie den Browser automatisch, und Sie können auch eine Seite angeben, wenn Sie den Browser mit webpack 4 öffnen.

"scripts": {
   ...
   "start": "webpack-dev-server --open-page index2.html"
}
0
riversun
directory/folder: package.json

{
  "devDependencies": {
  "babel-core": "^6.26.3",
  "babel-loader": "^7.1.5",
  "babel-preset-es2015": "^6.24.1",
  "babel-preset-react": "^6.24.1",
  "webpack": "^4.16.0",
  "webpack-dev-server": "^3.1.4"
},
  "name": "",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "description": "",
  "author": "",
  "private": false,
  "scripts": {
    "start": "webpack-dev-server --open --watch"
 },
  "dependencies": {
    "webpack-cli": "^3.0.8"
  }
}

Dieses Startskript führt den Dev-Server aus und öffnet und aktualisiert die Webseite automatisch (beim Speichern). Dies ist für WebPack 4.

0
brff19