javascript - 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 的条件，您可以将它们分成 block 。两者的入口点都是相同的。
然后加载并初始化您需要的那个。

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 会自动拆分它们，您只需加载您需要的即可。