How to use webpack- dev -server multiple entries point

When using webpack-dev-server with multiple entry points, the key steps involve configuring the webpack entry points, setting up appropriate output settings, and ensuring the devServer configuration accommodates the needs of multiple entry points. The following are the specific steps and examples:

Step 1: Configure Webpack Entry Points

In the webpack configuration file (typically webpack.config.js), define multiple entry points by setting key-value pairs in the entry object:

javascript
module.exports = {
  // Mode
  mode: 'development',

  // Entry points
  entry: {
    main: './src/index.js',
    about: './src/about.js',
    contact: './src/contact.js'
  },

  // Output configuration
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist'
  },

  // More configurations...
};

In this example, we define three entry points: main, about, and contact.

Step 2: Configure Output

In the output configuration, the filename uses the [name] placeholder, meaning the output file name is derived from the entry point's name. This ensures each entry point generates its own independent output file.

Step 3: Configure webpack-dev-server

In the same webpack.config.js file, configure the devServer options to support multiple entry points in the development environment:

javascript
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
    open: true,
    watchContentBase: true,
    historyApiFallback: {
      rewrites: [
        { from: /^/$/, to: '/views/main.html' },
        { from: /^/about/, to: '/views/about.html' },
        { from: /^/contact/, to: '/views/contact.html' }
      ]
    }
  }

The historyApiFallback is configured to handle routing issues in single-page applications (SPAs) by rewriting paths to match each entry point.

Step 4: HTML Template

Typically, prepare an HTML file for each entry point. Use HtmlWebpackPlugin to generate these files and automatically inject the corresponding script tags:

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

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/views/main.html',
      chunks: ['main']
    }),
    new HtmlWebpackPlugin({
      filename: 'about.html',
      template: 'src/views/about.html',
      chunks: ['about']
    }),
    new HtmlWebpackPlugin({
      filename: 'contact.html',
      template: 'src/views/contact.html',
      chunks: ['contact']
    })
  ],
  // Other configurations...
};

The chunks option ensures only the relevant bundles are included in their respective HTML files.

Conclusion

Using webpack-dev-server to handle multiple entry points primarily involves properly configuring the entry points, output settings, and the development server itself. This approach enables you to create independent development environments for different pages or feature modules, enhancing development efficiency and project maintainability. In practice, this configuration significantly improves development flexibility and productivity.