javascript - webpack打包 会把一个目录下面的所有文件都打包

问题描述

如果用下面的方式配置，引入的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都都打包进来

问题解答

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

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

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

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