javascript - 在 webpack 中动态加载 block ？

Question

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

我如何使用 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);
  //...
});

更新一:错误信息是由于没有配置output.publicPath引起的。但是，我从未创建过 1.1.bundle.js。它似乎忽略了入口点。

更新 2:即使在修复 output.publicPath 之后，它也无法加载动态生成的文件名。所以看起来 webpack 无法处理这个。

Answer 1

默认情况下，webpack 会尝试将所有代码打包到一个文件中。如果您在 main 入口点使用 file1.js/file2.js 中的代码，webpack 将打包 main.js 和第二个入口点中所有文件的内容related_files 将只输出 file1/file2 的内容。

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