Webpack 网页包自动启动浏览器

Gulp+live reload在localhost上提供我的内容，并且（以下是我的目标）每当我运行Gulp命令时（即，我不必单击浏览器图标并手动导航到url），就会在服务器url处自动启动浏览器。这也可以在网页中完成吗

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

我成功地使用了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);

对于使用Node.js（和npm）的用户：将命令放在npm启动脚本中：

MAC

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

窗口

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

感谢Enzo Ferey指出，在Windows上，命令需要看起来不同。

，我注意到当前接受的答案确实有效，但它会产生一个需要手动终止的进程的副作用。此后，我想出了一种更为规范的方法，可以在不使用单独的网页插件的情况下启动浏览器打开操作

也就是说，您确实需要安装更通用的npm软件包：

然后在项目文件夹中创建一个名为

server.js

的新文件。下面是一个示例实现（请注意，它在ES6中）：

请注意，这一行：

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

--这意味着您可以从

webpack.config.js

中删除对

webpack dev server/client？..

的调用，因为此

unshift

命令将在

config.entry

中插入行。当您需要设置具有多个环境和不同入口点的应用程序时，这是一个有用的模块化

最后，在

package.json

中，

start

命令应该是这样的：调用

node

运行

server.js

：

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

devServer: {
  open: true
}

---

Emelet的答案一点也不假，但它在Windows中不起作用。我是这样做的：

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

---

100%工作，无需安装任何模块或插件。

对于webpack 2.x版，只需将

--open

打开添加到CLI，如下所述：

或者，将以下配置添加到

webpack.config.js

：

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

devServer: {
  open: true
}

---

要启动浏览器，可以将

--open

添加到CLI命令，因为接受的答案指出了这一点

npm start --open

或

为了避免一直这样做：在

package.json中有一个简单的更改

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

此启动脚本将运行dev服务器，并自动打开和更新（保存时）网页。这适用于WebPack 4。
自动启动浏览器，也可以在使用WebPack 4打开浏览器时指定页面

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

您可以配置
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'
  },
});

接受的答案可以工作，但它会打开您的浏览器，即使在编译包还没有准备好的情况下，如评论中所述。以下方法解决了此问题：

    const { WebpackOpenBrowser } = require('webpack-open-browser'); // use any plugin to open browser

    const PORT = 8080;

    devServer: {
      open: false
    }
    
    plugins: [
      ...
      new WebpackOpenBrowser({ url: `http://localhost:${PORT}`}),
    ]

目前，我正在使用最新的网页包版本，但配置仍然是一样的，它为我工作。在webpack devServer配置中添加新属性
open:true
。
看起来像

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

非常感谢您的回答@thimthez，然而BrowserSync看起来像是一台相当大的机器来处理这么小的事情。可能包括自动启动浏览器，但“交互同步”、“UI或CLI控制”和“URL历史记录”（根据他们的主页）也包括在内。澄清一下：热加载不是这里的问题，只是在运行“webpack”命令时自动打开浏览器并导航到指定的url。谢谢你帮我澄清这个问题！问题是您没有考虑webpack配置。您已硬编码
http://localhost:8080/
URL，但情况并非总是如此。但作为一种解决方法，它可能会起作用。这就是我所做的，但我发现如果我按Ctrl-C键来打破它，我必须对服务器进行pkill。有办法吗？@DanNguyen是的，我也是。然而，问题不在于启动应用程序的这种特殊方式，它通常与webpack dev server有关。我发现的一个问题是，它在文件构建完成之前就开始打开链接。如果在一切就绪时打开链接会更好。在package.json中，在scripts
--open
中删除dev的值，它将自动打开browser@new2cpp会对你有用吗？谢谢你的回答，但这已经在接受的答案中给出了。我不想启动
webpack开发服务器
，所以我使用了
openbrowser-webpack插件
，可以让它工作。（顺便说一句，我使用的是real express server；但它的启动速度比
webpack--watch
）快。这看起来很神奇，因为它在加载包后及时打开浏览器，并且语法最简单。非常感谢！这是给angular的，是吗？是的，如果你更新你的软件包，它对angular有效。jsonsanks很多，它对我有效！
module.exports = {
  entry: ...,
  module: { ... },
  ...
  devServer: {
    ...
    open: true,
    ...
  },
};