Javascript 动态加载网页包中的块？

我们动态加载文件，也就是说，直到运行时我们才知道将加载哪些文件。同时，为了更快地加载，我们希望将相关文件放在同一块中

我怎样才能用webpack做到这一点

这就是我们所拥有的，它因404错误而失败（未找到1.1.bundle.js）

这就是webpack.config的外观：

entry: {
   main: //...,
   related_files: [ //should create chunk for file1 and file2?
     './file1.js',
     './file2.js'
   ]
},

var dynamicFileName = //...

require.ensure([], function (require) {
  //should dynamically load the chunk containing dynamicFileName? 
  //fails with 'file1.js' or 'file2.js' 
  var modImpl = require(dynamicFileName);
  //...
});

动态加载文件的代码如下所示：

entry: {
   main: //...,
   related_files: [ //should create chunk for file1 and file2?
     './file1.js',
     './file2.js'
   ]
},

var dynamicFileName = //...

require.ensure([], function (require) {
  //should dynamically load the chunk containing dynamicFileName? 
  //fails with 'file1.js' or 'file2.js' 
  var modImpl = require(dynamicFileName);
  //...
});

更新1：错误消息是由于未配置

output.publicPath

引起的。但是，我从未创建过

1.1.bundle.js

。它似乎忽略了入口点

---

更新2：即使修复了

output.publicPath

，它也无法加载动态生成的文件名。因此，webpack似乎无法处理此问题。

默认情况下，webpack尝试将所有代码捆绑到单个文件中。如果您在

main

入口点中使用file1.js/file2.js中的代码，webpack将捆绑

main.js

中所有文件的内容，第二个入口点

相关的_文件

将只输出file1/file2内容

Webpack通过使用

CommonChunkPlugin

处理这种情况，您的配置必须如下所示：

条目：{
main://。。。，
相关的_文件：['./file1.js'，'./file2.js']
},
插件：[
新建webpack.optimize.commonChunkPlugin（'related_files'，'related_files.js'））
]

问题的第二部分是webpack解析

require

语句，并输出

1.1.bundle.js

——可以在代码中加载require的动态模块。在您的情况下，

dynamicFileName='related_files'

，而不是file1/file2

---

请参见

Require（'related_files'）正是我不想做的。有没有办法让require（'./file1'）动态工作？在这种情况下，您需要删除第二个入口点，并在类似

require（'./file1.js'）

的代码中需要所需的模块。如果我删除入口点，那么要么所有内容都放在一个包中，要么我对相关文件的包失去控制（这些文件需要放在同一个包中）