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

发布于 2022-09-13 01:07:33 字数 1037 浏览 14 评论 0

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

{
  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存放,配置要怎样修改?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文