自动打开浏览器的Webpack配置

Question

Gulp + live reload会将我的内容提供在localhost上，并且（这是我想要的）每当我运行gulp命令时，它会自动在服务器URL上启动浏览器（即我不必点击浏览器图标并手动导航到URL）。Webpack也可以做到吗？

我尝试了一个名为open-browser-webpack-plugin的插件，但无法使其正常工作。

- swelet

---

我不想启动 webpack-dev-server，所以我使用了 open-browser-webpack-plugin 并且成功地让它工作了。（顺便说一下，我使用的是真正的 express 服务器；但是它比 webpack --watch 启动得更快）。 - Polv

Answer 1

对于webpack 2.x版本，你只需要像这里所述添加--open到CLI即可打开应用程序：

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

或者，将以下配置添加到webpack.config.js中：

devServer: {
  open: true
}

- Dave

---

我发现的一个问题是在文件构建完成前它开始打开链接。如果等到一切准备好再打开链接会更好。 - new2cpp

在 package.json 中，将 scripts 中 --open 的 dev 值移除即可自动打开浏览器。 - Akshat Zala

@new2cpp 这个对你有用吗？链接 - dasfdsa

需要安装包npm i --save-dev webpack-dev-server。 - 8ctopus

Answer 2

Emelet的回答并没有错误，但是在Windows中无法正常工作。我是这样做的：

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

100％有效而且您不需要安装任何模块或插件。

- Enzo Ferey

Answer 3

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

MAC

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

Windows

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

感谢Enzo Ferey指出，在Windows系统下，命令的格式需要有所不同。

- swelet

---

问题在于您没有考虑webpack配置。您已经硬编码了http://localhost:8080/ URL，但这并不总是正确的。但作为一种解决方法，它可能会起作用。 - WhiteAngel

这是我做的事情，但是我发现如果我使用Ctrl-C来中断它，我必须使用pkill命令来关闭服务器。有没有其他方法可以解决这个问题？ - dancow

@DanNguyen 是的，我也是。然而问题并不涉及到启动应用程序的特定方式，它与webpack-dev-server有关。 - swelet

Answer 4

为了启动浏览器，可以像接受的答案所指出的那样，在CLI命令中添加--open。

npm start --open

或者

ng serve --open

为了避免一直这样做：在package.json中有一个简单的修改可以进行。

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

- edkeveked

---

这看起来很棒，因为它在捆绑包加载后及时打开浏览器，并具有最简单的语法。非常感谢！ - krankuba

这是用于Angular的，对吗？ - Dror Bar

是的，如果您更新您的 package.json 文件，它可以用于 Angular。 - edkeveked

Answer 5

在之前的评论中, 我提到目前被接受的答案确实有效，但它会产生需要手动终止的进程副作用。我后来找到了更加规范的方法来启动浏览器打开操作，而不使用单独的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.config.js中删除对webpack-dev-server/client?...的调用，因为此unshift命令将该行插入到config.entry中...这是一种有用的模块化方法，用于在需要设置具有多个环境和不同入口点的应用程序时使用。

最后，在package.json中，start命令应如下所示：调用node来运行server.js：

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

- dancow

Answer 6

目前，我正在使用最新的webpack版本，但配置仍然保持不变，并且对我有效。在webpack devServer配置中添加新属性 open: true。

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

- Ashadi Sedana Pratama

Answer 7

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"
  }
}

这个启动脚本将运行开发服务器，并自动打开和更新（在保存时）网页。适用于 WebPack 4。

- brff19

---

谢谢回答，但已经在被接受的答案中给出了。它是“--open”做到的。 - swelet

Answer 8

我使用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);

- timthez

---

非常感谢您的回答 @thimthez，然而 BrowserSync 看起来对于处理这样一个小问题而言有些大材小用了。可能自动启动浏览器已经包含在内了，但也包括了诸如“交互同步”、“UI 或 CLI 控制”和“URL 历史记录”等功能（根据它们的主页）。澄清一下：热加载并不是这里的问题，只是在运行“webpack”命令时自动打开浏览器并导航到指定的 URL。感谢您帮助我澄清问题！ - swelet

Answer 9

自动启动浏览器，并且在使用 webpack 4 时还可以指定打开浏览器的页面。

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

- riversun

Answer 10

最新的webpack dev server语法，用于指定一个与默认浏览器不同的浏览器如下：

devServer: {
...
  open: {
    app: {
      name: 'google-chrome'
    }
  }
}

根据open package应用程序选项文档的规范，名称键将根据操作系统而异。

- Alex Ljamin