Webpack запускает браузер автоматически

Question

Gulp + live reload обслуживает мой контент на localhost и (вот что мне нужно) запускает браузер автоматически на сервере url всякий раз, когда я запускаю команду gulp (т.е. мне не нужно щелкните значок браузера и перейдите к URL-адресу вручную). Это можно сделать и в Webpack?

Я пробовал плагин под названием open-browser-webpack-plugin, но я не мог заставить его работать.

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

Поскольку большинство из нас используют узел (и НПМ) в эти дни: поставить команду в стартовом НПМ сценария:

MAC

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

WINDOWS

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

Благодаря Enzo Ferey за то, что он должен выглядеть по-разному в Windows.

Answer 4

In a previous comment, я отметил, что принятый в настоящее время ответ действительно работает, но имеет побочный эффект от нереста процесса, который необходимо убить вручную. С тех пор я понял, что более канонический способ инициировать открытое действие браузера без использования отдельного плагина webpack.

Тем не менее, вам необходимо установить более общий пакет NPM: open

Затем создайте новый файл в папку проекта под названием server.js. Вот пример реализации (обратите внимание, что в 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); 
}); 

Обратите внимание, что эта строка:

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

- означает, что вы можете удалить вызов webpack-dev-server/client?... из webpack.config.js, так как это unshift команда вставьте строку в config.entry ... это полезная модуляция, когда вам нужно настроить приложение с несколькими средами и разными точками входа.

Наконец, в package.json, это то, что команда start должна выглядеть следующим образом: вызов node запустить server.js:

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

Answer 5

Emelet ответ не ложен на всех, однако он не будет работать в Windows, , Я делаю это с:

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

100% работает, и вам не нужно устанавливать какой-либо модуль или плагин.