webpack-dev-server --open 如何指定打开的路径？

Question

当我使用--open标志启动webpack-dev-server时，如何激活它打开我的publicPath呢？

目前它会在浏览器中打开一个选项卡，指向http://localhost:3000，但是我希望它直接打开http://localhost:3000/app，这是我定义的public path。

当我手动输入webpack-dev-server启动后的http://localhost:3000/app时，它按预期工作。

这是我的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/'
    }])
  ]

};

- scipper

---

你正在使用AngularJS还是基于TS的新版Angular？对于这种情况，你可以使用Angular路由器直接将你重定向到所需的位置。这里有一个很好的解释如何实现。 - mutantkeyboard

我正在使用AngularJS（也用TS编写）。我会查看你的链接。 - scipper

请记住，在AngularJS和Angular 2中，路由的工作方式是不同的。 - mutantkeyboard

但是路由器的重定向不就是重定向到另一个“状态”吗？我想要重定向到另一个“目录”。 - scipper

我刚刚注意到你使用了 --open 标志...该标志用于设置浏览器。根据文档，您需要类似 --openPage 开关来在加载时导航到其他页面。如果这是您需要的。至于目录，除了从 contentBase 和 publicPath 提供服务之外，我不知道是否还有其他方法。 - mutantkeyboard

谢谢。就这些... - scipper

Answer 1

v4

使用devServer.open：

npx webpack serve --open /app

或者

module.exports = {
  // ...
  devServer: {
    open: ['/app'],
   // ...
  },
}

v3

使用devServer.openPage。

在你的情况下，值将是/app。

您还可以稍微改写一下配置，这样您就不必传递cli命令。

output: {
    publicPath: '/app', // deploy on server with /app/ folder name
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'public')
},

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
      }
    }
    open: true, // Here
    openPage: '/app' // And here
},

- ChrisR

---

就是这样！我完全错过了这个选项....谢谢你替我阅读文档 ;) - scipper

非常感谢 @Chris R. 你救了我的一命。 - Manjit

从webpack-dev-server (WDS) v4.8.1开始，您应该将openPage值放在open属性中（因为似乎已删除openPage）。 - dennisbot

Answer 2

您还可以尝试使用 before 选项：

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: 
      });
    }
  }
};

Express.js 响应文档

祝你好运...

- Aakash

---

看起来使用Gulpy解决这个问题是一种不错的方式；）但还是感谢你的努力。 - scipper

@scipper，使用这种方法，即使你访问http://localhost:8080/，它也会重定向到http://localhost:8080/app，而openPage只有在dev-server启动时才会转到/app。 - Aakash

我并没有说你的方法不可行。只是这种编程式的解决方式有点过于繁琐，一个简单的配置参数也可以解决这个问题。 - scipper

同意这有点“程序化”，而且“before”总是用于重定向，而不仅仅是在你在问题中提到的“dev-server start”时。 - Aakash