CODEWITHSUNDEEP
javascriptwebpack
philo
philo

Reputation: 540

Webpack: How to reuse entry point file in multiple page application?

For example:

I have two .vue file a.vue, b.vue,

and I want to generate multiple pages, so I need two entry point file a.js, b.js

But these two .js file are just different in one statement:

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

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

How could I reuse the entry point file ?

Chinese translation：

例如用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)
})

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

Upvotes: 0

Views: 163

Answers (1)

lukas-reineke
lukas-reineke

Reputation: 3322

Use dynamic imports.

If you have a condition that either loads a.vue or b.vue you can split them both in chunks. Your entry point will be the same for both.
Than load and initialise the one you need.

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)
  })
})

Something like this.
Webpack will split them automatically and you only load the one you need.

Upvotes: 1

Related Questions