webpack4构建MPA时如何按照entry生成目录并分配构建后的文件？

Question

现在的构建配置是类似这样的：

{
  entry: {
    app1: 'src/app1/index.js',
    app2: 'src/app2/index.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]/js/[name].js'
  }
}

有两个入口：app1和app2；

希望的结果是：由entry生成的js和被某个entry直接引用、间接引用的文件能够被放入entry对应目录下，异步、按需加载的js、图片、css等文件也会放到某个entry目录下。

比如:

// src/app1/index.js
import Panel from '@/app1/components/Panel.js';
() => import('@/app1/components/UserList.js');

src/app1/index.js内同步和异步的引入了两个js文件，希望的构建结果是

• dist

  • app1

    • js

      • Panel.js
      • UserList.js

而真实的情况是：构建后就被放到了dist/0/js/UserList.js而不是dist/app1/js/下

构建出来的目录结构是这样的：

• dist

  • 0

    • js

      • UserList.js

  • app1

    • js

      • app1.js
      • Panel.js

请问如果希望异步加载的js能够按照被引用的entry存放，配置要怎样修改？