Как собрать проект на vuejs в один файл?

Question

[Swartex]

Пишу свой небольшой проект на VueJS с использованием vue-cli-3. И не могу понять как настроить конфигурацию сборки, что бы сборка шла в один файл (например app.js).
Эту проблему решает шаблон для webpack`a (wepback-simple), но хочу понять как настроить вручную сборщик. И не тянуть левый шаблон.
Сейчас когда выполняю командуvue-cli-service build то получаю папку dist с подкаталогами внутри(js/css/img)
Для vue-cli-3 есть другой конфигурационный файл vue.config.js. Подскажите как настраивать такую сборку?
Если нет другого способа как юзать wepback-simple template то так тому и быть :(

Comments

[alex]

в vue.config .js правите конфиг вебпака. посмотреть текущий конфиг можно командой vue inspect, читайте доки к vue cli

Answer 1

[Robur]

Если хочется именно так же как в шаблоне webpack-simple, то туда и смотрите: https://github.com/vuejs-templates/webpack-simple/... Вебпак по умолчанию собирает js в один файл.
vue-cli тоже должен все js по умолчанию собирать в один файл, с некоторыми исключениями, описанными здесь: https://cli.vuejs.org/guide/build-targets.html#app
Если вам вообще хочется все-все-все в один файл затолкать, вместе с картинками и стилями то возникает вопрос зачем? это не лучшая идея. Если только js и они не в одном файле уже - надо смотреть почему, так как стандартно должен быть бандл на выходе.

Comments

[Swartex]

Это я делаю плагин для WP и потому нужно все пихать в один файл. но когда собираю через vue-cli-3 на выходе получаю
И на сколько я понимаю webpack-simple template уже немного устарел.

[Robur]

Насколько я помню, для плагина WP не обязательно иметь один файл. Лучше посмотреть как правильно регистрировать и загружать ресурсы плагина.
То что вы получаете - это хорошая структура, не нужно с ней ничего делать. Максимум убрать chunk-vendors и склеить его в app, но не обязательно и это ухудшит загрузку сайта. Для плагинов хороший тон грузить внешние библиотеки с публичных CDN, чтобы уменьшить нагрузку на сайт (большая часть при грамотном разделении возьмется из кеша браузера с большой вероятностью) у них другие варианты использования чем у SPA.

[Swartex]

Robur, как мне склеить chunk-vendors и app?
Вот мой файл конфигурации

// vue.config.js
module.exports = {
    chainWebpack: config => {
        if(config.plugins.has('extract-css')) {
            const extractCSSPlugin = config.plugin('extract-css')
            extractCSSPlugin && extractCSSPlugin.tap(() => [{
                filename: '[name].css',
                chunkFilename: '[name].css'
            }])
        }
        // config.optimization.delete('splitChunks')
    },
    configureWebpack: {
        output: {
            filename: '[name].js',
            chunkFilename: '[name].js'
        }
    }
}

[Robur]

Из головы не скажу - наверняка в документации это есть, поищите там.
можно попробовать убрать chunkFilename или раскомментировать строку "// config.optimization"
или поменять таргет билда с приложения на библиотеку. Возможно просто есть нужный флаг в конфигурации.