在webpack中动态加载块？

Question

我们动态加载文件，即我们不知道哪些文件将在运行时加载。 同时，为了加快加载速度，我们希望将相关文件放在同一个块中。

我怎么能用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);
  //...
});

更新1：错误消息是由未配置output.publicPath引起的。 但是，我从未创建过1.1.bundle.js 。 它似乎忽略了切入点。

更新2：即使在修复output.publicPath ，它也无法加载动态生成的文件名。 所以似乎webpack无法处理这个问题。

Answer 1

默认情况下，webpack尝试将所有代码捆绑在一个文件中。 如果您使用从file1.js / file2.js代码main切入点，将的WebPack捆绑的所有文件的内容在main.js ，和第二个入口点related_files都只输出文件1 /文件2的内容。

的WebPack通过处理这种情况CommonsChunkPlugin ，你的配置一定是这样的：

entry: {
   main: //...,
   related_files: ['./file1.js','./file2.js']
},
plugins: [
   new webpack.optimize.CommonsChunkPlugin('related_files', 'related_files.js')
]

问题的第二部分是webpack解析require语句，并输出1.1.bundle.js - 动态模块，可以在代码中加载require。 在您的情况下， dynamicFileName = 'related_files' ，而不是file1 / file2。

请参阅http://webpack.github.io/docs/code-splitting.html#split-app-and-vendor-code