web-dev-qa-db-fra.com

Webpack lance automatiquement le navigateur

Gulp + live reload diffuse mon contenu sur localhost et (voici ce que je suis après) lance automatiquement le navigateur sur l'URL du serveur chaque fois que j'exécute la commande gulp (c.-à-d. Que je n'ai pas à cliquer sur l'icône du navigateur et accédez à l'URL manuellement). Cela peut-il aussi être fait dans Webpack?

J'ai essayé un plugin appelé open-browser-webpack-plugin, mais je ne pouvais pas le faire fonctionner.

webpackwebpack-dev-server
25
swelet

Pour la version 2.x de Webpack, vous ajoutez simplement --open ouvert à la CLI, comme indiqué ici:

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

39
HDave

La réponse d'Emelet n'est pas fausse du tout, mais cela ne fonctionnera pas sous Windows. Je fais ça avec: 

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

100% de travail et vous ne devez installer aucun module ou plugin.

8
Enzo Ferey

Comme la plupart d’entre nous utilisons node (et npm) ces jours-ci: mettez la commande dans le script de démarrage npm:

MAC

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

LES FENÊTRES

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

Merci à Enzo Ferey pour avoir souligné le fait que cela doit être différent sous Windows.

6
swelet

Dans un commentaire précédent , j'ai remarqué que la réponse actuellement acceptée fonctionne, mais qu'elle a pour effet secondaire de générer un processus qui doit être éliminé manuellement. Depuis, j'ai trouvé le moyen le plus canonique de lancer une action d'ouverture du navigateur sans utiliser de plug-in webpack séparé.

Cela dit, vous devez installer un paquet npm plus général: open

Créez ensuite un nouveau fichier dans votre dossier de projet nommé server.js. Voici un exemple d'implémentation (notez qu'il est dans 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);
});

Notez que cette ligne:

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

- Cela signifie que vous pouvez supprimer l'appel à webpack-dev-server/client?... de webpack.config.js, car cette commande unshift insérera la ligne dans config.entry... Il s'agit d'une modularisation utile lorsque vous devez configurer une application avec plusieurs environnements et différents points d'entrée.

Enfin, dans package.json, voici à quoi devrait ressembler la commande start: un appel à node pour exécuter server.js:

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

Pour lancer le navigateur, il est possible d’ajouter --open à la commande CLI selon la réponse acceptée.

npm start --open

ou 

ng serve --open

Pour éviter de le faire tout le temps: il y a un changement simple à faire dans package.json

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

J'ai eu du succès avec BrowserSync avec webpack.

Dans webpack.config.js, j'inclus ceci:

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

Lancer le navigateur automatiquement et il est également possible de spécifier une page lors de l'ouverture du navigateur avec Webpack 4.

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

Ce script de démarrage exécute le serveur de développement, puis ouvre et met à jour automatiquement la page Web. Ceci est pour WebPack 4.

0
brff19