如何将多个与 Vue 捆绑在一起

Posted 2023-02-22

【中文标题】如何将多个与 Vue 捆绑在一起

【英文标题】：How to bundle more than one with Vue

【发布时间】：2019-06-07 22:34:16

【问题描述】：

我已经用 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 ......而当我在 /dist 下构建 donr.js 时，所有的 JS 都带有 webpack 标头和所有这些好东西。我不明白为什么，也不明白如何查看 dev-server 正在服务的文件，它是从我身上抽象出来的......有什么想法可以解决这个问题吗？

更新 #3 强制开发服务器将编译后的文件转储到磁盘。 我什至没有看到donr.js，而我只是在构建时看到它。 我慢慢意识到 dev-server 在某处有错误....

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

运行 npm serve VS npm build

有什么想法吗？

【问题讨论】：

webpack 开发服务器使用内存文件系统，运行vue-cli serve 时没有文件写入磁盘。它监视所做的更改并通过 websocket 更新页面。

【参考方案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()

【讨论】：

它不太奏效，但确实让我走上了正确的道路，看看 UPDATE #2，不知道如何解决这个问题......