Webpack Web包开发服务器--是否打开到特定路径？

当用--open标志启动webpack dev服务器时，我如何激励它打开我的公共路径

目前，它打开了一个浏览器选项卡，但我希望它直接打开，这是我定义的公共路径

当我在WebpackDev服务器启动后手动键入时，它会按预期工作

这是我的webpack.config.js，到目前为止效果很好：

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');

module.exports = {

  entry: {
    vendor: [
      'jquery',
      'angular'
    ],
    app: './src/app/index.module.js',
    libs: [
      './src/libs/pagination/dirPagination.js',
      './src/libs/sc-date-time/sc-date-time.js',
      './src/libs/msd-elastic.js',
      './src/libs/ng-textcomplete.js',
      './src/libs/highcharts/highslide-full.js',
      './src/libs/highcharts/Sankey.js'
    ]
  },

  output: {
    filename: '[name].bundle.js',
    chunkFilename: '[id].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/app/'
  },

  devtool: 'inline-source-map',

  devServer: {
    contentBase: './dist',
    host: 'localhost',
    port: '3000',
    inline: true,
    compress: true,
    proxy: {
      '/api/**': {
        target: 'http://10.189.1.159:8080',
        secure: false,
        changeOrigin: true,
        cookieDomainRewrite: true
      }
    }
  },

  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
    alias: {
      angular: path.resolve(__dirname, 'node_modules/angular/index.js')
    }
  },

  module: {

    rules: [{
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader', 'postcss-loader']
      })
    }, {
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          {loader: 'css-loader', options: {sourceMap: true}},
          {loader: 'postcss-loader', options: {sourceMap: true}},
          {loader: 'sass-loader', options: {sourceMap: true}}
        ]
      })
    }, {
      test: /\.ts|\.js?$/,
      exclude: /node_modules/,
      loader: 'ts-loader'
    }, {
      test: /\.html$/,
      use: [
        {loader: 'ngtemplate-loader?relativeTo=' + (path.resolve(__dirname, 'src/app'))},
        {loader: 'html-loader'}
      ],
      exclude: path.resolve(__dirname, 'src/index.html')
    }, {
      test: /\.(jpe?g|gif|png|svg)$/,
      use: [
        {loader: 'file-loader?relativeTo=' + (path.resolve(__dirname, 'src/assets'))}
      ]
    }, {
      test: /.(ttf|otf|eot|woff(2)?)(\?[a-z0-9]+)?$/,
      use: [{
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'fonts/'
        }
      }]
    }, {
      test: require.resolve('jquery'),
      use: [{
        loader: 'expose-loader',
        options: 'jQuery'
      }, {
        loader: 'expose-loader',
        options: '$'
      }]
    }, {
      test: require.resolve('angular'),
      use: [{
        loader: 'expose-loader',
        options: 'angular'
      }]
    }]

  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new ExtractTextPlugin('styles.css'),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: Infinity
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      minChunks: Infinity
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/index.html',
      chunks: ['manifest', 'vendor', 'app', 'libs']
    new CopyWebpackPlugin([{
      context: './src/assets/locales',
      from: '**/*',
      to: './assets/locales/'
    }])
  ]

};

使用

在您的情况下，该值将是

/app

您还可以重写一些配置，这样就不必传递cli命令

输出：{
publicPath:'/app'，//在具有/app/文件夹名的服务器上部署
文件名：'[name].bundle.js'，
path:path.resolve（_dirname，'public'））
},
开发服务器：{
contentBase:“./dist”，
主机：“localhost”，
端口：“3000”，
是的，
是的，
代理：{
“/api/**”：{
目标：'http://10.189.1.159:8080',
安全：错误，
来源：对，
cookieDomainRewrite：正确
}
}
open:true，//在这里
openPage:'/app'//在这里
},

您也可以在

之前尝试
：

祝你好运…
你是在使用AngularJS，还是新的基于TS的AngularJS？对于这种情况，您可以使用角度路由器直接将您重定向到所需的位置。这是一个很好的解释，我使用的是AngularJS（也是用TS编写的）。我会看一看你的链接。请记住，AngularJS中的路由工作方式与Angular2不同。但路由器重定向不就是重定向到另一个“状态”吗？我想重定向到另一个“目录”。我刚刚注意到您使用了
--open
标志。。。该标志用于设置浏览器。根据，加载时需要类似于
--openPage
开关的东西来导航到另一个页面。如果你需要的话。至于目录，我不知道除了从contentBase和publicPath提供服务之外还有什么其他方法。就是这样！我完全错过了这个选择。。。。感谢您为我阅读文档；）非常感谢@Chris R。你救了我的命。看起来是解决这个问题的好办法；）但感谢您的努力。@scipper，使用这种方法，即使您访问
http://localhost:8080/
它将
重定向到
http://localhost:8080/app
而
openPage
只有在
dev服务器启动时才会转到
/app
。我没有说你的方法不起作用。这是一种太过程序化的方法来解决这个问题，一个简洁的配置参数也可以解决这个问题。同意这是一种有点
程序化的
，而且
之前的
用于
始终重定向
，而不是像您在问题中所问的那样，仅在
开发服务器启动
。
module.exports = {
  //...
  devServer: {
    before: function(app, server) {
      app.get('/', function(req, res) {
        res.redirect('/app'); // here you can try any of the Express JS res options mentioned in the answer below: 
      });
    }
  }
};