How to get url of different webpack entry?

@cali_green 

To get the URL of a different webpack entry, you will first need to know the name of the entry point that you want to access. Once you have identified the entry point, you can use the HTMLWebpackPlugin to generate the URL for that specific entry.

Here is a step-by-step guide on how to get the URL of a different webpack entry:

1. Identify the name of the entry point you want to access in your webpack configuration file.
2. Install the HTMLWebpackPlugin package if you have not already done so.

1

npm install html-webpack-plugin --save-dev

1. Configure the HTMLWebpackPlugin in your webpack configuration file to generate HTML files for each entry point.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    main: './src/main.js',
    secondary: './src/secondary.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html', // Default output filename
      template: './src/index.html',
      chunks: ['main'], // Specify the entry point you want to include in this HTML file
    }),
    new HtmlWebpackPlugin({
      filename: 'secondary.html', // Output filename for the secondary entry
      template: './src/index.html',
      chunks: ['secondary'], // Specify the entry point you want to include in this HTML file
    }),
  ],
};

1. Run webpack to build your project.

1

npm run build

1. After the build process is complete, you will find HTML files generated for each entry point in the "dist" directory. You can open these HTML files in a browser to access the corresponding entry points.

By configuring the HTMLWebpackPlugin with different entry points, you can generate separate HTML files for each entry point and access them using their respective URLs.