当 webpack 服务器运行时，如何运行不同的 html 文件而不是 index.html？

Question

When I run webpack server, Below config by default opens index.html available in public folder. so, Instead of index.html, I want to create another.html or may be like a folder inside which an html eg. public/someFolder/another.html and want to open it, when webpack server is run.

how to run a different html file instead of index.html when webpack server runs?

webpack.config.js

const path = require("path");
module.exports = {
  entry: "./myFile.js",
  output: {
    path: path.join(__dirname, "public"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        loader: "babel-loader",
        test: /\.js$/,
        exclude: /node_modules/,
      },
      {
        test: /\.s?css$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
  devtool: "cheap-module-eval-source-map",
  devServer: {
    contentBase: path.join(__dirname, "public"),
    historyApiFallback: true,
  },
};

Answer 1

Have a look at HtmlWebpackPlugin

You can specify a custom path and a custom.html file.

  output: {
    filename: './dist/subdirectory/myindex.html'
  },
  plugins: [new HtmlWebpackPlugin()]

The default is of course index.html