webpack - Webpack ブラウザを自動的に起動

Question

Gulp + live reload は localhost でコンテンツを提供し、 (これが私の目的です) gulp コマンドを実行するたびに、サーバーの URL でブラウザーを自動的に起動します(つまり、ブラウザーのアイコンをクリックして URL に移動する必要はありません)手動）。これはWebpackでも実行できますか?

open-browser-webpack-plugin というプラグインを試してみましたが、うまくいきませんでした。

Answer 1

webpack バージョン 2.x の場合、--openここに記載されているように CLI に open を追加するだけです。

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

または、次の構成を に追加しますwebpack.config.js。

devServer: {
  open: true
}

Answer 2

Emelet の回答はまったく誤りではありませんが、Windows では機能しません。私はこれを行います：

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

100% 動作し、モジュールやプラグインをインストールする必要はありません。

Answer 3

Node.js (および npm) を使用している場合: コマンドを npm 開始スクリプトに入れます。

マック

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

ウィンドウズ

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

Windows ではコマンドの外観を変える必要があることを指摘してくれた Enzo Ferey に感謝します。

Answer 4

ブラウザーを起動するには--open、受け入れられた回答が指摘しているように、CLI コマンドに追加できます。

npm start --open

また

ng serve --open

常にそれを行うことを避けるために: 簡単な変更がありますpackage.json

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

Answer 5

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