Question

Gulp + live reload在localhost上提供我的内容（这是我之后的事情）每当我运行gulp命令时，在服务器URL自动启动浏览器即我不必点击浏览器图标并手动导航到网址。这可以在Webpack中完成吗？

我尝试过一个名为open-browser-webpack-plugin的插件，但我无法让它工作。

Answer 1

对于webpack版本2.x，您只需向CLI添加--open，如下所示：

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

Answer 2

Emelet的回答并非完全错误，但它在Windows中无法运行。我这样做：

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

100％正常工作，您不必安装任何模块或插件。

Answer 3

In a previous comment，我注意到当前接受的答案确实有效，但它产生的副作用是产生一个需要手动杀死的进程。我已经找到了在不使用单独的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",
   //...
  }

Answer 4

要启动浏览器，可以将--open添加到CLI命令，因为接受的答案指出了

npm start --open

或

ng serve --open

为避免一直这样做：在package.json

中进行简单的更改

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

Answer 5

我已成功使用BrowserSync和webpack。

在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 6

<datacollection-group xmlns="http://xmlns.opennms.org/xsd/config/datacollection" name="Microsoft">
  <group name="windows-host" ifType="ignore">
    <mibObj oid=".1.3.6.1.2.1.25.3.3.1.2" instance="0" alias="cpuPercentBusy" type="integer" />
    <mibObj oid=".1.3.6.1.2.1.25.3.3.1.2" instance="1" alias="cpuPercentBusy" type="integer" />
    <mibObj oid=".1.3.6.1.2.1.25.3.3.1.2" instance="2" alias="cpuPercentBusy" type="integer" />
    <mibObj oid=".1.3.6.1.2.1.25.3.3.1.2" instance="3" alias="cpuPercentBusy" type="integer" />
    <mibObj oid=".1.3.6.1.2.1.25.3.3.1.2" instance="4" alias="cpuPercentBusy" type="integer" />
    <mibObj oid=".1.3.6.1.2.1.25.3.3.1.2" instance="5" alias="cpuPercentBusy" type="integer" />
    <mibObj oid=".1.3.6.1.2.1.25.3.3.1.2" instance="6" alias="cpuPercentBusy" type="integer" />

此启动脚本将运行开发服务器，并自动打开和更新（保存）网页。这是针对WebPack 4的。

Answer 7

自动启动浏览器，使用webpack 4打开浏览器时也可以指定页面。

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

Answer 8

您可以配置devServer

const merge = require('webpack-merge');
const common = require('./webpack.base.config.js');
const path = require('path');

module.exports = merge(common, {
  mode: 'development',
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 3000,
    hot:true,
    compress: true,
    open:"Chrome",
    openPage:'index.html'
  },
});

Answer 9

目前，我使用的是最新的 webpack 版本，但配置仍然相同，并且对我有用。在您的 webpack devServer 配置中添加新属性 open: true。看起来像

module.exports = {
  entry: ...,
  module: { ... },
  ...
  devServer: {
    ...
    open: true,
    ...
  },
};

Webpack自动启动浏览器

9 个答案: