使用webpack2中的webpack-dev-server设置在浏览器中自动打开的URL

Question

我可以自定义在浏览器中自动打开的网址吗？我发现那里没有api？由于项目根目录下没有索引，但默认URL为localhost：8080。或者我想调试正在开发的页面。

Answer 1

您可以尝试使用此插件： Open Browser Webpack Plugin

按照以下步骤操作......

1. 首先安装插件：

   npm install open-browser-webpack-plugin --save-dev

2. 从 package.json 中移除--open选项，或从 webpack.config.js 移除open: true选项， devServer 配置 或者webpack.config.js中的open: true

3. 现在您需要将插件要求并配置到webpack.config.js

   中

   var OpenBrowserPlugin = require('open-browser-webpack-plugin');`
   
   module.exports = {
     ...
     ...
     ...
     plugins: [
       new OpenBrowserPlugin({ url: 'http://localhost:3000/mycustompath' })
     ]
   };
   

Answer 2

您可以像这样配置webpack.config.js：

 entry: __dirname + '/src/index.js',
 output: {
    path: path.join(__dirname, 'static'),,
    filename: "bundle.js",
    publicPath: "/static/dist/"
  },
  devServer: {
    publicPath: '/static/dist/',
    open: true, 
    openPage: 'static/dist/somefile.html' 
  },...

这里重要的是devServer.open和devServer.openPage。您必须启用devServer.open并在devServer.openPage中设置自定义URL，才能首先在devServer中打开它。我在package.json中的配置：

"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production",
"dev": "webpack --mode development"
},...

最后通过：

npm run start

希望有帮助。问候

Answer 3

我没有任何插件的解决方案

修改您的package.json文件，如下面的代码所示

1. macOS / Linux

{
  "scripts": {
    "dev": "open http://localhost:8080 && webpack --config webpack.config.js",
  }
}

1. Windows

{
  "scripts": {
    "dev": "start http://localhost:8080 && webpack --config webpack.config.js",
  }
}

1. webpack-dev-server

{
  "scripts": {
    "dev": "webpack-dev-server --open --config webpack.config.js",
  }
}

裁判

https://webpack.js.org/configuration/dev-server/

https://webpack.js.org/guides/development/#using-webpack-dev-server

https://www.cnblogs.com/xgqfrms/p/12858667.html

Webpack launch browser automatically

Answer 4

devServer：{ 开放：正确， openPage：'oa'/ *当浏览器打开时* / }