Dynamically load chunks in webpack?

Question

We load files dynamically, that is, we do not know which files will be downloaded before execution. At the same time, for faster downloads, we would like to put related files in the same piece.

How can I do this using webpack?

This is what we have and it does not work with error 404 (1.1.bundle.js not found)

This is what webpack.config looks like:

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

This is what the code for dynamically loading files looks like this:

var dynamicFileName = //...

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

Update 1: The error message is not due to configuration output.publicPath. However, I never created 1.1.bundle.js. It seems to be ignoring the entry point.

Update 2: even after the fix, output.publicPathit cannot load the dynamically generated file name. Therefore, it seems that the web package cannot handle this.

Answer 1

webpack . file1.js/file2.js main, webpack main.js, related_files 1/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 - , . dynamicFileName = 'related_files', file1/file2.

. http://webpack.imtqy.com/docs/code-splitting.html#split-app-and-vendor-code