Question

我已经用vue-cli 3开始了一个项目，我当前的目录树是：

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

当我运行vue-cli build时，我将所有源捆绑在/ dist下的app.js中。

我的目标是捆绑另一个捆绑包，例如/ public下的一些脚本或/ src下的特殊目录中的special-app.js。

我无法使用tsconfig或尝试通过vueconfig.js来扩充webpack配置。

如何捆绑说/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-server正在提供的文件，它是从我身上提取出来的。...有什么想法可以解决这个问题吗？

更新＃3 强制dev-server将编译的文件转储到磁盘。我什至看不到donr.js，而我刚构建时却看到了它。我慢慢想到开发服务器在某处存在错误。...

有问题的Github URL： https://github.com/amoldavsky/vue-multi-bundle/tree/master

运行npm服务VS npm构建

有什么想法吗？

Answer 1

您需要配置webpack入口点。

使用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()
}

如何与Vue捆绑多个

1 个答案: