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

在程序中确实无法解决此问题
1、在package.json当中，配置想要打包的内容
2、在webapck当中，根据package.json的配置来设置一个别名
3、在入口文件当中 引用别名就可以实现了

package.json

  "template":"send"

webpack.conf.js

  var pkg =require('../package');
  alias: {  
      'app': resolve('src/page/'+ pkg.template+'.vue')
    }
    

index.js(入口文件）

const App = require('app');

这样一来，就可以根据package.json当中的template配置，来打包指定的模版文件了

Answer 2

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

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

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

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

Answer 3

webpack有个方法require.ensure(),可能对你有帮助

Answer 4

不知道楼主这个问题有没有解决。今天有碰到，所以这里说下我的解决方案。首先，这个在webpack打包编译的时候，执行不到你这个js文件的。不信可以再这里打印日志看看，node控制台里是没有任何输出的。换句话来说，若要实现动态编译文件，即根据条件动态打包某些文件，必须要具体的文件模块名。我的解决方案是，根据不同的打包条件（这里用到了cross-env,来指定打包编译的条件）。然后利用node里的文件系统（fs）来动态生成所需要的文件（这里就是你想要打包进来的文件模块，也就是你这段代码require(@/page/${templateName}.vue);的templateName所包含的内容）。如生成了一个template.js文件，里面包含的内容是const app = require('@/page/dialog.vue'); export default app;,然后在入口文件里，添加const app = require('path/template.js')即可。参考代码可见：链接描述