Gulp + live reload 在本地主机上提供我的内容，并且（这就是我所追求的）在我运行 gulp 命令时自动在服务器 url 启动浏览器（即我没有单击浏览器图标并手动导航到 url）。这也可以在 Webpack 中完成吗？
我尝试了一个名为 open-browser-webpack-plugin 的插件，但我无法让它工作。
【问题讨论】：
webpack-dev-server，所以我使用了open-browser-webpack-plugin 并且可以让它工作。 （顺便说一句，我使用真正的快递服务器；但它的启动速度比webpack --watch 快）。
标签： webpack webpack-dev-server
目前，我正在使用最新的 webpack 版本，但配置仍然相同，并且对我有用。在您的 webpack devServer 配置中添加新属性 open: true。
好像
module.exports = {
entry: ...,
module: { ... },
...
devServer: {
...
open: true,
...
},
};
【讨论】：
接受的答案会起作用，但即使编译的捆绑包尚未准备好，它也会打开您的浏览器，如 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}`}),
]
【讨论】：
你可以配置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'
},
});
【讨论】：
对于 webpack 版本 2.x，您只需将 --open open 添加到 CLI，如下所述：
https://webpack.js.org/configuration/dev-server/#devserver-open
或者，将以下配置添加到您的webpack.config.js：
devServer: {
open: true
}
【讨论】：
--open 它将自动打开浏览器
对于那些使用 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 上需要看起来不同。
【讨论】：
http://localhost:8080/ URL，但情况并非总是如此。但作为一种解决方法，它可能会起作用。
自动启动浏览器，也可以在使用 webpack 4 打开浏览器时指定页面。
"scripts": {
...
"start": "webpack-dev-server --open-page index2.html"
}
【讨论】：
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 添加到 CLI 命令中，因为接受的答案指出了这一点
npm start --open
或
ng serve --open
为了避免一直这样做：在package.json 中进行一个简单的更改
"scripts": {
"ng": "ng",
"start": "ng serve --open",
...
},
【讨论】：
Emelet 的答案一点也不假，但它在 Windows 中不起作用。我这样做：
"scripts": {
"start": "start http://localhost:8000/ & webpack-dev-server"
}
100% 工作，您无需安装任何模块或插件。
【讨论】：
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",
//...
}
【讨论】：
我已经成功使用 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);
【讨论】：