webpackを用いてhtmlのコピーを行いたい

Question

実現したいこと

現在webpackを用いて静的なサイトの作成を行っています。

構成はプロジェクト配下srcディレクトリに自分の書いたJSやHTMLのコードがあり、webpackを通じてdistディレクトリへバンドル済みのJSを吐き出しています。

このdistへsrcからファイルをコピーして配置することはできないのでしょうか？

具体的には、srcに配置されているindex.htmlをdist下にコピーしたいです。

ファイルのコピーについて検索するとfile-loaderを用いるようにという記事が何件かヒットするので、その記事を参考にconfigを書き換えましたがdistにはbundle.jsのみが出力されます。

そもそも、webpackをこのような用途で用いるのは前提として誤っているのかについても教えていただけると幸いです。

webpack.config.js

const path = require('path')

module.exports = {
  entry: path.resolve(__dirname, 'src', 'js', 'index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: 'dist'
  },
  module: {
    rules: [
      {
        test: /.js$/,
        include: path.resolve(__dirname, 'src'),
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      },
      {
        test: /.html$/,
        include: path.resolve(__dirname, 'src'),
        loader: 'file?name=[name].[ext]'
      },
      {
        test: /.css$/,
        include: path.resolve(__dirname, 'src'),
        loader: 'file?name=[name].[ext]'
      },
    ]
  }
}

Answer 1

Copy Webpack Pluginがその目的にぴったりだと思います。新たにパッケージをインストールする必要がありますが。

#例

const CopyWebpackPlugin = require('copy-webpack-plugin')

...

    plugins: [
        new CopyWebpackPlugin([
            { from: 'src/index.html' },
        ])
    ],

...

Answer 2

html-webpack-pluginを使うことで言っていることができるようです。