Automatyczna aktualizacja przeglądarki Webpack

Question

Gulp + live reload wyświetla moją zawartość na localhost i (tutaj jest to, czego szukam) uruchamia przeglądarkę automatycznie pod adresem URL serwera za każdym razem, gdy uruchomię polecenie gulp (tzn. Nie muszę kliknij ikonę przeglądarki i przejdź do adresu URL ręcznie). Czy można to zrobić również w pakiecie Webpack?

Próbowałem wtyczki o nazwie open-browser-webpack-plugin, ale nie mogłem jej uruchomić.

Answer 1

Dla wersji internetowej 2.x, wystarczy dodać --open otwarty do CLI udokumentowane tutaj:

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

Answer 2

Ive miał sukces przy użyciu BrowserSync z plecakiem.

W webpack.config.js I to w ten sposób:

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

Ponieważ większość z nas korzysta węzeł (i npm) w tych dniach: umieścić polecenia w skrypcie startowym npm:

MAC

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

WINDOWS

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

Podziękowania dla Enzo Ferey za wskazanie, że musi wyglądać inaczej w systemie Windows.

Answer 4

In a previous comment, Zauważyłem, że aktualnie zaakceptowana odpowiedź działa, ale ma efekt uboczny odrodzenia procesu, który musi zostać ręcznie zabity. Od tego czasu wymyśliłem bardziej kanoniczny sposób inicjowania otwartej akcji przeglądarki bez używania osobnej wtyczki do przeglądarki internetowej.

Powiedział, że trzeba zrobić, aby zainstalować pakiet npm bardziej ogólny: open

następnie utworzyć nowy plik w folderze projektu o nazwie server.js. Oto realizacja próbka (należy pamiętać, że jest w 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); 
}); 

Zauważ, że ta linia:

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

- oznacza, że ​​można usunąć wywołanie webpack-dev-server/client?... z webpack.config.js, jak tego polecenia unshift będzie wstaw linię do config.entry ... jest to przydatna modularyzacja, gdy musisz skonfigurować aplikację z wieloma środowiskami i różnymi punktami wejścia.

Wreszcie w package.json, to co komenda start powinna wyglądać następująco: wezwanie do node uruchomić server.js:

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

Answer 5

Emelet odpowiedź nie jest fałszywy w ogóle, ale to nie będzie działać w systemie Windows . Robię to z:

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

100% pracy i nie trzeba instalować żadnego modułu lub wtyczki.