【Vue CLI】初期設定のエントリーポイントを変える

Vue CLIで作成したプロジェクトでは、初期設定のエントリーポイントは隠蔽されています。
今回は、初期設定されているエントリーポイントを変える方法について記載します。

環境

モジュール名	バージョン
@vue/cli	4.4.6

【Tips】 Vue CLI 4系を使う場合の注意点

Vue CLIのバージョンは4系でwebpackの設定をする場合は、webpack.config.jsではなくvue.config.jsで設定します。
Vue CLIについて触れているページではwebpack.config.jsを記載しているページもありますが、4系では適用されないかもしれませんので注意が必要です。

実現したい事

スクリプトファイルをscriptsディレクトリに纏めてしまいたいと思います。

変更方法

初期状態ではwebpackのエントリーポイントをsrc/main.tsに設定されています。
その設定をsrc/scripts/main.tsに上書きするため、vue.config.jsを次の様に設定しました。

もし、ファイルがない場合はvue.config.jsを手動で追加してください。

//vue.config.js

module.exports = {
    pages: {
        index: {
            entry: 'src/scripts/main.ts',
            template: 'public/index.html',
            filename: 'index.html',
            title: 'トップページ',
            chunks: ['chunk-vendors', 'chunk-common', 'index']
        }
    }
};

Tips

dist/index.htmlはどこから来ているのか？

Vue CLIでビルドをすると、dist/index.htmlというファイルが生成されます。
このファイルはsrcディレクトリ配下にありません。

このファイルはpublicディレクトリ配下にあります。
Vue CLIで環境を作った場合は静的ファイルはpublic配下に設置する事で読み込む事が出来ます。

cli.vuejs.org

また、静的ファイルのディレクトリを変える設定はありません。
経緯については下記が参考になります。

github.com

---

---

以上です。

Vueの環境を作る時は、webpackのコンフィグファイルを直接設定していました。
しかし、Vue CLIでないと解決できない機能やVue CLIを用いる事で解決する情報の方が多くwebpackだけでは難しさを感じました。
(もちろん、元を辿ればwebpackなので、厳密には絶対解決出来ないわけではないとは思います。)

Vue CLIについても理解を進めないといけないな…と思う今日この頃です。