webpack server serves different index.html files under different directories in multiple page application

Question

I am developing a Web application of multiple pages with Webpack. In develop environment, I want Webpack server to open the index.html files under the different directories in url according to the file path, for example: http://localhost/index/file/to/the/directories/, then the index.html file serve automatically, without typing index.html in the url. The Webpack server using the plugins: webpack-dev-middleware, webpack-hot-middleware. Is there a way to achieve this mission?

The project directory is like below:


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

Vue.js used in the project, and the code below is simplified.

The 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'],
    }),
  ],
}

The dev-server.js is below:

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()
  }
}

Now, I start the server, I open the url in the browser: http://localhost:3000/directoryA/. I hope it will open the index.html file under the directory, but it isn't. How can I let it work?

webpack server serves different index.html files under different directories in multiple page application

0 Answers0