Vue.jsで作ったSPAをAmazon S3で公開するのだが、とにかくcssとjsを階層構造なく平らに置きたいんだ

独り言の作業記録ログです。

0.本日のゴール

vuejsで作ったSPA。
Amazon S3で公開するのだが、CSSやJSを階層構造なくフラットに配置したい。

1.それ、vue.config.jsでビルド時の出力先をカスタマイズできるよ

vue.config.js

module.exports = {
    devServer: {
        port: 3000,
        disableHostCheck: true,
    },
    configureWebpack: {
        output: {
            filename: '[name].js',
        },
    },
    css: {
        extract: {
            filename: '[name].css',
            chunkFilename: '[name].css',
        },
    },
    outputDir: 'dist',
    chainWebpack: config => {
        config.output
            .filename('[name].js')
            .chunkFilename('[name].js');

        config.module
            .rule('images')
            .use('file-loader')
            .loader('file-loader')
            .tap(options => {
                options = options || {};
                options.name = '[name].[ext]';
                return options;
            });
    }
};

瞬殺だった・・・。

(fin)