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

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

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

ОТВЕТЫ

Ответ 2

Ответ на Emelet не является ложным вообще, однако он не будет работать в Windows. Я делаю это с помощью:

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

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

Ответ 3

Для тех, кто использует Node.js (и npm): поместите команду в стартовый скрипт npm:

MAC

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

WINDOWS

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

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

Ответ 4

В предыдущем комментарии, я отметил, что принятый в настоящее время ответ действительно работает, но он имеет побочный эффект от нереста процесса, который нужно убить вручную. С тех пор я выяснил более канонический способ запуска действия браузера без использования отдельного плагина 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",
   //...
  }

Ответ 5

Чтобы запустить браузер, можно добавить --open к команде CLI, как это указано в принятом ответе.

npm start --open

или же

ng serve --open

Чтобы не делать это постоянно: в package.json нужно внести простое изменение

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

Ответ 6

У меня был успех с помощью 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);

Ответ 7

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"
  }
}

Этот стартовый скрипт запустит сервер разработки и автоматически откроет и обновит (при сохранении) веб-страницу. Это для WebPack 4.

Ответ 8

Запустите браузер автоматически, также можно указать страницу при открытии браузера с помощью веб-пакета 4.

"scripts": {
   ...
   "start": "webpack-dev-server --open-page index2.html"
}