Webpack 自动启动浏览器

Posted 2023-02-16

【中文标题】Webpack 自动启动浏览器

【英文标题】：Webpack launch browser automatically

【发布时间】：2016-01-24 03:41:18

【问题描述】：

Gulp + live reload 在本地主机上提供我的内容，并且（这就是我所追求的）在我运行 gulp 命令时自动在服务器 url 启动浏览器（即我没有单击浏览器图标并手动导航到 url）。这也可以在 Webpack 中完成吗？

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

【问题讨论】：

我不想启动webpack-dev-server，所以我使用了open-browser-webpack-plugin 并且可以让它工作。 （顺便说一句，我使用真正的快递服务器；但它的启动速度比webpack --watch 快）。

【参考方案1】：

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

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

【参考方案2】：

接受的答案会起作用，但即使编译的捆绑包尚未准备好，它也会打开您的浏览器，如 cmets 中所述。以下方法解决了这个问题：

    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`),
    ]

【参考方案3】：

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

【参考方案4】：

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

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

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

devServer: 
  open: true

【讨论】：

我发现的一个问题是它在文件构建完成之前开始打开链接。万事俱备后打开链接会更好。

在 package.json 中删除脚本中 dev 的值 --open 它将自动打开浏览器

@new2cpp 将 this 为您工作吗？

【参考方案5】：

对于那些使用 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 上需要看起来不同。

【讨论】：

问题是你没有考虑到 webpack 配置。您已经硬编码了http://localhost:8080/ URL，但情况并非总是如此。但作为一种解决方法，它可能会起作用。

这就是我所做的，但我发现如果我 Ctrl-C 退出服务器，我必须 pkill 服务器。有什么办法吗？

@DanNguyen 我也是。然而，问题与这种启动应用程序的特定方式无关，它通常与 webpack-dev-server 有关。

【参考方案6】：

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

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

【参考方案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。

【讨论】：

感谢您的回答，但这已经在接受的答案中给出。它的 --open 做到了。

【参考方案8】：

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

npm start --open

或

ng serve --open

为了避免一直这样做：在package.json 中进行一个简单的更改

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

【讨论】：

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

这是 Angular 的，是吗？

是的，如果你更新你的 package.json，它适用于 Angular

【参考方案9】：

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

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

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

【参考方案10】：

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.config.js 中删除对webpack-dev-server/client?... 的调用，因为此unshift 命令会将行插入config.entry...当您需要设置一个具有多个环境和不同入口点的应用程序。

最后，在package.json 中，start 命令应该是这样的：调用node 以运行server.js：

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

【参考方案11】：

我已经成功使用 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);

【讨论】：

非常感谢您的回答@thimthez，但是 BrowserSync 看起来像是一台相当大的机器来处理这么小的事情。也许包括自动启动浏览器，但也包括“交互同步”、“UI 或 CLI 控制”和“URL 历史记录”（根据他们的主页）。澄清一下：热加载不是这里的问题，只是在运行“webpack”命令时自动打开浏览器并导航到指定的 url。感谢您帮助我澄清问题！