webpack-open-browser-plugin
Version:
open browser when webpack after compile(all done)
53 lines (37 loc) • 2.34 kB
Markdown
[](https://github.com/webpack/webpack-dev-server) have open browser ability, but the experience is poor, webpack not finish compile, browser already opened, we will see a blank loading page at long time.
webpack devServer 开发服务器有打开浏览器的功能，但是体验很差，在webpack还没编译完成，浏览器已经打开了，显示一个空白的加载页面，要等很久，而且启动开发时，我们在看编译的log输出，打开浏览器突然打断了log输出，显示到眼前的却是一个加载页面，体验非常糟糕。
This plugin resolve the problem: when webpack after compile, browser will open, you can see the webpage, not a blank page!
这个插件会解决这个问题，体验更好！
插件会在webpack编译完成，才打开浏览器，因为编译完成了，你能直接看到网页内容，而不是空白的加载页面。
更好的体验：不会打断编译log输出、不会看到烦人的空白加载页面。
```console
npm install webpack-open-browser-plugin --save-dev
```
```javascript
const OpenBrowserPlugin = require('webpack-open-browser-plugin');
// webpack.config.js
// add to config.plugins
module.exports = {
plugins: [
// other plugins
// add plugin
new OpenBrowserPlugin({
url: 'http://localhost:8080'
})
]
}
// Remember to turn off the open browser with devServer, because you have OpenBrowserPlugin now.
// config.devServer: {
// open: false
// }
```
[](https://www.npmtrends.com/webpack-open-browser-plugin)
[](https://github.com/fisker/webpack-open-browser-plugin/blob/master/license)
[](https://www.npmjs.com/package/webpack-open-browser-plugin)
本插件结合了webpack的编译hook钩子实现的。
打开浏览器的功能兼容 Windows 和 Mac。
发布的代码经过 es-check es5 验证，最大化兼容不同版本的 nodejs 环境。
理论上兼容 webpack 2.x/3.x/4.x/5.x。