Как связать больше чем один с Vue - PullRequest
Новая
       57

Как связать больше чем один с Vue

0 голосов
/ 13 января 2019

Я запустил проект с vue-cli 3, мое текущее дерево каталогов: 

/
  /dist
  /public
    index.html
    favicon.ico
  /src
    /assets
    /components
    /plugins

когда я запускаю сборку vue-cli, все исходники объединяются в app.js в /dist.

Моя цель - собрать другой пакет, скажем special-app.js, из нескольких скриптов в / public или из специального каталога в /src.

.

Мне не удалось этого добиться каким-либо образом, используя tsconfig или пытаясь расширить конфигурацию веб-пакета с помощью vueconfig.js.

Как я могу связать, скажем, /src/special/a.ts и /src/special/b.ts -> /dist/special.js?

ОБНОВЛЕНИЕ # 1

Я попробовал решение, предложенное @ digitaldrifter 

config.entryPoints.delete('app');

config
  .entry('app')
    .add(path.resolve(__dirname, './src/widget/main.ts'))
    .end()

config.entry('runner')
    .add(path.resolve(__dirname, './src/donr/donr.ts'))
    .add(path.resolve(__dirname, './src/donr/donr.scss'))
    .end();

В результате отсутствует runner.js или runner.html в конце

ОБНОВЛЕНИЕ № 2

Единственный способ получить правильную сборку - использовать pages https://cli.vuejs.org/config/#pages

pages: {
  widget: {
    entry: 'src/widget/main.ts',
    template: 'public/index.html',
    filename: 'index.html'
  },
  donr: {
    entry: 'src/runner/donr.ts',
    template: 'public/donr.html',
    filename: 'donr.html'
  }
}

построить мудро, это сработало! Я получил: 

File              Size                         Gzipped

dist/widget.js    4723.88 kb                   841.16 kb
dist/app.js       4723.88 kb                   841.16 kb
dist/donr.js      236.48 kb                    56.84 kb
dist/test.js      191.93 kb                    42.07 kb

ПРОБЛЕМА когда я делаю vue-cli serve, donr.js используется как HTML ... тогда как когда я делаю сборку donr.js под /dist, это все JS с заголовком webpack и всем этим хорошим материалом. Я не понимаю, почему, и я не понимаю, как увидеть файлы, которые обслуживает dev-сервер, он абстрагирован от меня .... есть идеи, как решить эту проблему?

ОБНОВЛЕНИЕ № 3 заставил dev-сервер выгрузить скомпилированные файлы на диск. Я даже не вижу donr.js, в то время как я вижу это, когда я только строю. Я постепенно прихожу к мысли, что где-то в dev-сервере есть ошибка ...

Github URL с проблемой: https://github.com/amoldavsky/vue-multi-bundle/tree/master

запустить npm serve VS npm build

есть идеи?

1 Ответ

0 голосов
/ 14 января 2019

Вам необходимо настроить точки входа в веб-пакет.

Использование опции chainWebpack: 

chainWebpack: config => {
    // first clear the default app entry point
    config.entryPoints
          .delete('app')

    // add a new entry with the necessary files
    config.entry('special')
          .add('/src/special/a.ts')
          .add('/src/special/b.ts')
          .end()

    // you can split the bundle by entries also
    config.entry('special-a')
          .add('/src/special/a.ts')
          .end()

    config.entry('special-b')
          .add('/src/special/b.ts')
          .end()
}
...