S'il est configuré de la manière suivante, le fichier VUE importé ne sera empaqueté qu'avec la vue dont j'ai besoin
import Vue from 'vue'
import vueTap from 'v-tap';
import $ from '@/public/libs/zepto.min';
import pkg from '../package.json';
window.wx = require('@/public/libs/weixin-1.0.0');
window.APP = require('@/public/libs/APP');
window.Share = require('@/public/libs/share');
import '@/public/style/reset.css';
Vue.use(vueTap);
Vue.config.productionTip = false;
const App = require(`@/page/dialog.vue`);
new Vue({
el: "#app",
render: h => h(App)
});
Mais si je souhaite définir les fichiers vue qui doivent être importés en fonction de la configuration, tous les fichiers vue du répertoire de la page ci-dessus seront empaquetés
import Vue from 'vue'
import vueTap from 'v-tap';
import $ from '@/public/libs/zepto.min';
import pkg from '../package.json';
window.wx = require('@/public/libs/weixin-1.0.0');
window.APP = require('@/public/libs/APP');
window.Share = require('@/public/libs/share');
import '@/public/style/reset.css';
Vue.use(vueTap);
Vue.config.productionTip = false;
var templateName = pkg.template;
const App = require(`@/page/${templateName}.vue`);
new Vue({
el: "#app",
render: h => h(App)
});
La différence est :
const App = require(@/page/${templateName}.vue
);@/page/${templateName}.vue
);
和
const App = require(@/page/dialog.vue
et
@/page/dialog.vue< / code>);
Objectif : selon ma configuration, seuls les fichiers vue configurés sont empaquetés à chaque fois que je conditionne, pas tous les fichiers vue 🎜.
Les dépendances dynamiques ne peuvent pas déterminer les dépendances au moment de la compilation, donc webpack essaiera de regrouper tous les modules pouvant être référencés pour garantir une exécution normale.
Proposer deux idées de packaging selon configuration
Écrivez la configuration sous forme de variables d'environnement au lieu de variables de programme.
Réalisé grâce à plusieurs entrées.