Project file structure:

├─build
├     ├─webpack.base.js
├     ├─webpack.dev.js
├     └─webapck.prod.js
├─package.json
├
├─src
    └─views
          ├─admin
          ├     ├─index.js
          ├     └─index.html
          └─client
                ├─index.js
                └─index.html

entry configuration

Development environment (dev):

entry: {
    admin: [
      resolve('./src/views/admin/index.js'),
      'webpack-hot-middleware/client?quiet=true' // If the hot update is started through webpack hot middleware, the hot update client needs to be added.
    ],
    client: [
      resolve('./src/views/client/index.js'),
      'webpack-hot-middleware/client?quiet=true' // If the hot update is started through webpack hot middleware, the hot update client needs to be added.
    ]
  }

Production environment (prod):

entry: {
    admin: [
      resolve('./src/views/admin/index.js')
    ],
    client: [
      resolve('./src/views/client/index.js')
    ]
  }

output configuration

output: {
  filename: '[name].[hash:8].js',  // Because it is multi application, the package file must be generated by name matching.
  path: './dist',
  publicPath: '/'
}

html configuration

Because it is a multi page application, each application has an independent html file

To configure through the HTML webpack plugin plug-in, you need to achieve the following goals:

• Each html file only loads the dependent packages required by the corresponding application.
• Different dependent packages can be loaded according to different environments

Development environment (dev):

plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: resolve('./src/views/admin/index.html'),
      chunks: ['admin'], // Set chunks to install only the specified dependent packages. If not, all dependent packages will be loaded.
      inject: true
    }),
    new HtmlWebpackPlugin({
      filename: 'client.html',
      template: resolve('./src/views/client/index.html'),
      chunks: ['client'], // Set chunks to install only the specified dependent packages. If not, all dependent packages will be loaded.
      inject: true
    })
  ]

Production environment (prod):

plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: resolve('./src/views/admin/index.html'),
      chunks: ['admin'],
      inject: true,
      minify: true  // Compressed file
    }),
    new HtmlWebpackPlugin({
      filename: 'client.html',
      template: resolve('./src/views/client/index.html'),
      chunks: ['client'],
      inject: true,
      minify: true // Compressed file
    })
  ]