Webpack：如何在多页应用程序中重用入口点文件？

Question

例如：

我有两个.vue文件a.vue ， b.vue ，

而且我想生成多个页面，所以我需要两个入口点文件a.js ， b.js

但是，这两个.js文件在一个语句中只是不同：

import Vue from 'vue'
import App from './a.vue' // or import App from '.b.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

如何重用入口点文件？

---

中文翻译：

例如用VUE写，a.vue，b.vue两个文件

多页打包的话就要分别为这两个文件各自写一个入口文件，例如a.js，b.js

但其实这两个入口文件除了引入的VUE文件不同，其他都相同

import vue from 'vue'
import App from 'a.vue' // 这句不同 import App from 'b.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

那么请问有什么办法可以共用一个入口文件呢？

Answer 1

使用动态导入。

如果您有加载a.vue或b.vue的条件，则可以将它们拆分成块。 两者的入口点将相同。
然后加载并初始化所需的那个。

import Vue from 'vue'

const appPromise = condition ? import('./a.vue') : import('./b.vue');

appPromise.then(({ default: app }) => {
  new Vue({
    el: '#app',
    render: h => h(App)
  })
})

这样的事情。
Webpack会自动拆分它们，而您只加载所需的那个。