web-dev-qa-db-ja.com

Webpack起動ブラウザー

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

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

webpackwebpack-dev-server
34
swelet

Webpackバージョン2.xの場合は、--openここに記載されているようにCLIを開きます。

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

51
HDave

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

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

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

9
Enzo Ferey

Node.js（およびnpm）を使用している場合：npm起動スクリプトにコマンドを追加します。

[〜＃〜] mac [〜＃〜]

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

[〜＃〜] windows [〜＃〜]

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

コマンドはWindowsの場合とは異なるように見える必要があると指摘してくれたEnzo Fereyに感謝します。

8
swelet

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

npm start --open

または

ng serve --open

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

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

前のコメントで 、現在受け入れられている答えは機能しますが、手動で強制終了する必要があるプロセスを生成するという副作用があることに注意しました。それ以来、別の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);

-このunshiftコマンドはwebpack-dev-server/client?...に行を挿入するため、webpack.config.jsからconfig.entryへの呼び出しを削除できることを意味します。複数の環境と異なるエントリポイントでアプリをセットアップする必要があります。

最後に、package.jsonでは、startコマンドは次のようになります。server.jsを実行するnodeの呼び出し：

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

ブラウザを自動的に起動し、webpack 4でブラウザを開くときにページを指定することもできます。

"scripts": {
   ...
   "start": "webpack-dev-server --open-page index2.html"
}
1
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"
  }
}

この起動スクリプトは、devサーバーを実行し、Webページを自動的に開いて更新（保存）します。これはWebPack 4用です。

1
brff19

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