webpack + vueの遅延ローディングでチャンクファイル名がうまく生成されないときにチェックすること

やりたいこと

以下の書き方で index.js とは別に遅延ローディング用の home.bundle.js を生成する。
概要としては、公式Doc https://webpack.js.org/configuration/output/#output-chunkfilename をやりたい。

詰まったのでメモ。

index.ts

const router = new Router({
  routes: [
    {
       path: "/home",
       component: () =>
          import(/* webpackChunkName: "home" */ "./view/home/Home.vue"),
    },
  ]
});

webpack.config.js の概要は以下の通り。（関係あるところだけ）
依存ファイルたちを vendors.bundle.js として出力する設定になっている。

webpack.config.js

module.exports = {
  target: "web",
  mode: "production",
  entry: "./src/index.ts",
  output: {
    path: path.join(__dirname, destDir),
    filename: "index.js",
    chunkFilename: `[name].bundle.js`,
  },

  module: {
     // ...
  },

  //  ...

  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          chunks: "all",
        },
      },
    },
  },

  // ...

}

問題

home.bundle.js みたいに出力されてほしいのに 1.bundle.js のように数値が入ってくる。
vendor.bundle.js は直接指定しているので問題ない。

チェックすべきこと

https://github.com/webpack/webpack/issues/4861
ここで皆さんが熱心に議論されていました。

チェック1: .babelrc

babelを使っている場合は .babelrc にコメントを削除する記述がないかチェック

.babelrc

{
    // ...
    "comments": false <= ここをtrueに 
}

チェック２: tsconfig.json

関係あるところだけ抜粋。
removeComments が true になっている場合は false にする。

また、上の議論の中では module を esnext にすればいけると言っている人もいる。
一応試すと良いかも。

tsconfig.json

{
  "compilerOptions": {
    "module": "esnext",
    "removeComments": true,
  }
}

その他

エイリアスは使わないほうが無難説

@ で /src を表す系のものはやめたほうがいいと言っている人もいる。

そもそも chunkFileName が指定されているかどうか確認

さんざん騒いだ後に「指定してなかったわ。。。orz」みたいなのは避けたい。