Webpack 自动启动浏览器

Question

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

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

Answer 1

我已经成功地使用 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 2

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

Answer 3

，我注意到当前接受的答案确实有效，但它具有产生需要手动终止的进程的副作用。从那以后，我想出了更规范的方式来启动浏览器打开操作，而无需使用单独的 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",
   //...
  }

Answer 4

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

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

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

Answer 5

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

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

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

devServer: {
  open: true
}

Answer 6

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

npm start --open

或

ng serve --open

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

中做一个简单的改变

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

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 的。

Answer 8

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

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

Answer 9

您可以配置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 10

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

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

Answer 11

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

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

Answer 12

用于指定不同浏览器而非默认浏览器的最新 webpack dev server syntax 如下：

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

名称密钥将根据 open package 应用选项文档中的 OS 规范而有所不同。

Webpack 自动启动浏览器

Webpack launch browser automatically

webpack

webpack-dev-server