Webpackの起動ブラウザが自動的に起動する

Question

gulp + live reloadはローカルホスト上で自分のコンテンツを提供します（はgulpコマンドを実行するたびにサーバURLのブラウザで自動的にブラウザを起動します。ブラウザのアイコンをクリックし、手動でURLに移動します）。これはWebpackでもできますか？

open-browser-webpack-pluginというプラグインを試しましたが、動作させることができませんでした。

Answer 1

webpack version 2の場合。ここに記載されているように、X、あなただけのCLIにオープン--openを追加：あなたの答えの@thimthezため

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

Answer 2

Iveはwebpackで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

私たちのほとんどは、これらの日のノード（およびNPM）を使用しているので：

MAC：NPMの起動スクリプトにコマンドを入れます

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

WINDOWS

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

Windowsの場合は、外観が異なる必要があることを指摘してくれたEnzo Fereyに感謝します。

Answer 4

In a previous comment現在受け入れられている回答は機能しますが、手作業で殺す必要があるプロセスを生成するという副作用があることに気づきました。私は別のwebpackプラグインを使わずにブラウザオープンアクションを開始するより標準的な方法を考え出しました。その後server.jsという名前のプロジェクトフォルダに新しいファイルを作成open

：あなたは、より一般的なNPMパッケージをインストールする必要があります、と述べた

。このラインという

'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); 
}); 

注：ここではサンプル実装（それはES6であることに注意してください）です

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

は - あなたはこのunshiftコマンドとして、webpack.config.jsからwebpack-dev-server/client?...への呼び出しを削除することができることを意味は、意志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％働くので、モジュールやプラグインをインストールする必要はありません。