javascript - webpack打包 會把一個目錄下面的所有檔案都打包

Question

如果用下面的方式配置，引入的VUE文件，打包的時候只會打包我需要的vue

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

但如果，我想要根據配置來設定需要引入的vue文件，就會把以上page目錄下面的所有vue都打包

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

不同之處在：
const App = require(@/page/${templateName}.vue);
和
const App = require(@ /page/dialog.vue);

目的：根據我的配置，每次打包的時候只打包配置的vue文件，不要所有的vue都打包進來

Answer 1

動態依賴在編譯時完全無法確定依賴關係，所以 webpack 會嘗試將所有可能引用到的 m​​odule 進行打包，以確保運行時正常。

依照配置打包提供兩個思路

1. 將配置寫成環境變量，而不是程式變數。

2. 透過多入口的形式來實現。