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

时间:2016-12-23 03:21:43

标签: webpack-dev-server webpack-2

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

4 个答案:

答案 0 :(得分: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' })
      ]
    };
    

答案 1 :(得分:0)

您可以像这样配置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

希望有帮助。问候

答案 2 :(得分:0)

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

修改您的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

答案 3 :(得分:0)

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