Webpack自动启动浏览器

webpack Webpack

猴子

2020-03-24

Gulp + live reload在本地主机上提供我的内容,并且(这就是我要做的)每当我运行gulp命令(即,我不必单击浏览器图标并导航到url)时,都会在服务器url上自动启动浏览器。手动)。可以在Webpack中完成吗?

我尝试了一个名为open-browser-webpack-plugin的插件,但无法正常工作。

第3550篇《Webpack自动启动浏览器》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

6个回答
JinJin小卤蛋JinJin 2020.03.24

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

"scripts": {
   ...
   "start": "webpack-dev-server --open-page index2.html"
}
凯西里 2020.03.24
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的。

GO 2020.03.24

对于使用Node.js(和npm)的用户:将命令放在npm启动脚本中:

苹果电脑

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

视窗

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

感谢Enzo Ferey指出在Windows上,该命令需要看起来有所不同。

Gil 2020.03.24

Emelet答案根本不是错误的,但是在Windows中将不起作用。我这样做:

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

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

Mandy村村 2020.03.24

要启动浏览器,可以将其添加--open到CLI命令,因为接受的答案指出了该命令

npm start --open

要么

ng serve --open

为了避免一直这样做:只需进行一个简单的更改即可 package.json

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

对于Webpack版本2.x,您只需按以下说明将--openopen 添加到CLI:

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

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

devServer: {
  open: true
}

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android