Сервер веб-пакетов обслуживает различные файлы index.html в разных каталогах в многостраничном приложении.

Question

Я разрабатываю веб-приложение из нескольких страниц с помощью Webpack. В среде разработки я хочу, чтобы сервер Webpack открывал файлы index.html в разных каталогах в url в соответствии с путем к файлу, например: http://localhost/index/file/to/the/directories/, затем index Файл.html подается автоматически, без ввода index.html в URL. Сервер Webpack, использующий плагины: webpack-dev-middleware, webpack-hot-middleware. Есть ли способ выполнить эту миссию?

Каталог проекта, как показано ниже:

    -Build
      -dev-server.js
      -webpack.conf.js
    -src
      -directoryA
        -mainA.js
      -directoryB
        -mainB.js
    -template
      -mainA.html
      -mainB.html

Vue.js используется в проекте, а приведенный ниже код упрощен.

Webpack.conf.js:

var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: {
    mainA: './src/directoryA/mainA.js',
    mainB: './src/directoryB/mainB.js',
  },
  output: {
    path: './src'
    filename: '[name].js',
    publicPath: '/'
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'directoryA/index.html',
      template: 'template/mainA.html',
      inject: true,
      chunks: ['mainA'],
    }),
    new HtmlWebpackPlugin({
      filename: 'directoryB/index.html',
      template: 'template/mainB.html',
      inject: true,
      chunks: ['mainB'],
    }),
  ],
}

Dev-server.js находится ниже:

var path = require('path')
var express = require('express')
var webpack = require('webpack')
var webpackConfig = require('./webpack.conf')

var port = process.env.PORT || config.dev.port

var app = express()
var compiler = webpack(webpackConfig)

var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  quiet: true
})

var hotMiddleware = require('webpack-hot-middleware')(compiler, {
  log: () => {}
})
// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
    hotMiddleware.publish({ action: 'reload' })
    cb()
  })
})

// serve webpack bundle output
app.use(devMiddleware)
app.use(hotMiddleware)



var uri = 'http://localhost:' + port

var _resolve
var readyPromise = new Promise(resolve => {
  _resolve = resolve
})

console.log('> Starting dev server...')
devMiddleware.waitUntilValid(() => {
  console.log('> Listening at ' + uri + '\n')
  // when env is testing, don't need open it
  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
    opn(uri)
  }
  _resolve()
})

var server = app.listen(port)

module.exports = {
  ready: readyPromise,
  close: () => {
    server.close()
  }
}

Теперь я запускаю сервер, открываю URL в браузере: http://localhost:3000/directoryA/. Я надеюсь, что он откроет файл index.html в каталоге, но это не так. Как я могу позволить этому работать?