Question

我正在尝试将我的大单页应用程序从Require.js迁移到webpack，并且代码拆分存在一些问题。我的申请有结构：

js --|
|    |-- entry.js
|    |-- components --|
|                     |-- component_1.js
|                     |-- component_2.js
|                     ... // many components 
|                     |-- component_n.js
|    |-- pages --|
|                |-- page_1.js
|                |-- page_2.js
|                ... // many pages
|                |-- page_n.js
|    |-- routers --|
|                  |-- router.js

所以我想为每个页面创建一个单独的包。我在router.js中使用bundle-loader来执行此操作：

require('bundle!pages/' + pageName)(function (result) {
      //... to do something in callback when the page is loaded
});

没关系。此外，每个页面都有定义部分，其中包含一些所需的组件（并非所有组件）。例如：

define([
    'components/component_1',
    'components/component_7',
    'components/component_29'
], function (c1, c2, c3) { 
   // ... to do something with OBJECTS c1, c2, c3.
});

Webpack将这些组件的代码放在包含页面的包上。但是有很多页面使用相同的组件和组件可能很大，所以我有重复的代码。（DedupePlugin不适用于bundle-loader）。此外，我不想创建所有组件的常见大包。我想要隔离组件并与页面同步加载每个组件。 RequireJS解决了这个问题。首先它加载每个component.js文件（如果之前没有加载）和加载的page.js.当然，我可以在webpack中使用bundle-loader作为组件：

define([
    'bundle!components/component_1',
    'bundle!components/component_7',
    'bundle!components/component_29'
], function (c1, c2, c3) { 
   // ??? what to do with CALLBACKS c1, c2, c3 ?
});

然后组件与页面异步加载，即在加载页面之后。并且c1，c2，c3是回调，但我需要将它们用作对象。或者我需要完全重写我的大应用程序。这太难了。我试着编写基于bundle-loader的自定义加载器。这是here。如何将其与回调一起使用：

require('bundle-amd!pages/' + pageName)(function (result) {
      //... to do something in callback when the page is loaded
});

如何在define部分（使用define参数）中使用它：

define([
    'bundle-amd?define!components/component_1',
    'bundle-amd?define!components/component_7'
], function (c1, c2) { 
   // ... to do something with OBJECTS c1, c2
});

我的代码很糟糕，因为我不是nodejs开发者，这是我的第一次体验。但是加载器工作并且捆绑中没有重复的代码。我呼吁经验丰富的开发人员。如果有机会，请创建此加载程序（或插件）以供大量使用。我想，我不是唯一一个需要同步加载捆绑包的人。希望你帮帮我。谢谢！

使用webpack bundle-loader同步加载RequireJS等捆绑包

0 个答案: