Javascript – Webpack-Paketierung packt alle Dateien in einem Verzeichnis

Question

Wenn die Konfiguration wie folgt erfolgt, wird die importierte VUE-Datei nur mit dem Vue gepackt, das ich benötige

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

Aber wenn ich die Vue-Dateien festlegen möchte, die gemäß der Konfiguration importiert werden müssen, werden alle Vue im obigen Seitenverzeichnis gepackt

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

Der Unterschied ist:
const App = require(@/page/${templateName}.vue);@/page/${templateName}.vue);
和
const App = require(@/page/dialog.vue und

const App = require(@/page/dialog.vue< / Code>);

Zweck: Gemäß meiner Konfiguration werden bei jedem Packen nur die konfigurierten Vue-Dateien gepackt, nicht alle Vue-Dateien 🎜

Answer 1

动态依赖在编译时完全无法确定依赖关系，所以 webpack 会尝试将所有可能引用到的 module 进行打包，以保证运行时正常。

按照配置打包提供两个思路

1. 将配置写成环境变量，而不是程序变量。

2. 通过多入口的形式来实现。