再也不用等待 Webpack 编译完成后手动打开浏览器了！

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3103 天前的主题，其中的信息可能已经有所发展或是发生改变。

在用 Webpack 开发网站的时候，我们一般要等待 Webpack 编译完成之后手动在浏览器内输入网址，而且如果我开发的是一个手机网站，为了能同时在电脑和手机上看到效果，我每天开机时都需要查看一下自己电脑的局域网 IP 地址，这样太繁琐了！

于是我开发了 OpenPack，它是一个 Webpack 插件，有以下特性：

在 Webpack 编译完成后自动打开浏览器
对 webpack-dev-server 非常友好。配置好 webpack-dev-server 之后，你都不需要配置 OpenPack 了
能将网址的 host 替换为本机的局域网 IP 地址

更多信息请戳：（英文很烂，文档就将就着看吧 - -）

https://github.com/lmk123/openpack

webpack

浏览器

编译

openpack

12 条回复 • 2016-05-26 01:12:54 +08:00

ziki

2016-05-25 14:40:37 +08:00

https://github.com/baldore/open-browser-webpack-plugin

kenshinhu

2016-05-25 14:59:53 +08:00

webpack-dev-server 好像不能映射到 localhost 的
仅能在 127.0.0.1 上打开

milklee

2016-05-25 15:05:34 +08:00

@ziki 如果你看了项目的 README ，就知道这个项目确实跟 open-browser-webpack-plugin 很类似，但是加了很多新功能

milklee

2016-05-25 15:14:39 +08:00

@kenshinhu 我刚才测试了一下， webpack-dev-server 是可以绑定到 localhost 上的。你试试看？

kenshinhu

2016-05-25 15:20:04 +08:00

@milklee 哦,不是 openpack 而是直接通过 webpack.config.js 配置

doublleft

2016-05-25 15:42:59 +08:00

呃。。。你的意思是加了一个 open()嗎

milklee

2016-05-25 16:07:30 +08:00

@kenshinhu 我就是直接配置的 webpack.config.js 的：

```js
module.exports = {
devServer: {
host: 'localhost'
}
}
```

milklee

2016-05-25 16:12:36 +08:00

@doublleft

webpack-dev-server 自带一个 `--open` 参数能自动打开 url ，但是只对 webpack-dev-server 2.0 以上有效；

另外，我主要是想自动打开当前局域网 IP 地址的网址，这样我开发的网站就能在同一局域网的手机啊 ipad 啊甚至同事的电脑上访问了（特别是在 APP 里内嵌 webview 的时候尤为有用）

rupert

2016-05-25 17:27:48 +08:00

browser-sync 不是有这个功能了吗

milklee

2016-05-25 17:41:30 +08:00

@rupert 我还是第一次听说这个，看起来很强大！

popo233

2016-05-26 00:55:54 +08:00

第一次用的时候就有这个东西了..

popo233

2016-05-26 01:12:54 +08:00

哦不是这个东西