hoge

補完機能を開発環境に組み込んでいく上で、組み込むためのjsファイルが必要になります。vue-cliに含まれているwebpackのおかげでモジュールに切り分けられていても1つのファイルとして出力してくれるのですが、デフォルトではファイル名にハッシュが付け加えられた形になります。 結局1つのファイルにまとめられてもスクリプトタグで読み込むのは変わらないのでソースの場所を書くわけですが、ちょっと修正してビルドするとハッシュが変わるので、サーバ側の読み込みファイル名も変えないといけないためとても不便です。なのでファイル名にハッシュを含めないように設定します。 通常webpackでは`webpack.config.js`を使っていましたが、vue-cliでは`vue.config.js`にwebpackのコンフィグを書いていきます。 ```js module.exports = { configureWebpack: { output: { filename: '[name].js', chunkFilename: '[name].js' } }, css: { extract: { filename: '[name].css', }, }, } ``` vue.config.jsに上記のように書いてbuildすると今までjsディレクトリ、cssディレクトリ、それ以外の静的ファイルと分けられていたのがdistディレクトリにひとまとめにされ、また`app.js`、`app.css`というファイル名で出力されるようになります。 ハッシュが含まれなくなったので読み込むところは常に`app.(任意の拡張子)`で済むようになり、サーバ上のディレクトリのファイルを更新するだけでよくなりました。