Webpack:如何将电子应用程序中的用户界面从业务逻辑中分离出来?

我在Electron + Vue 2 + Webpack 2 + Bootstrap 3上开发了一个桌面应用程序。目前,所有的JS代码都被webpack捆绑在一起,并作为单个文件包含在HTML中。

的index.html

<body> <script src="bundle.js"></script> </body> 

一切正常,但…

主要的缺点是bundle.js大小太大了。 虽然,我用Webpack CommonsChunkPlugin将bundle.js拆分为app.js (我的代码)和vendor.js(第三方库),但我仍然觉得有些问题。 在Electron中, 不需要将所有的东西捆绑在一起,因为文件不会通过networking传输。 但在另一方面,我需要Webpack来编译Vue模板。 所以,我想find一种将UI与业务逻辑分开的方法:

 <body> <!-- UI: views, controllers, etc / bundled by webpack --> <script src="app.js"></script> <script src="vendor.js"></script> <!-- business logic : models, services, DAO etc / NOT bundled by webpack --> <script src="logic.js"></script> </body> 

问题是我不明白如何从Vue模板(在app.js中定义)调用业务逻辑/服务(在logic.js中定义)。 Whaterver我正在尝试webpack总是用这个replacerequire() logic.js

 var test = __webpack_require__(!(function webpackMissingModule() { var e = new Error("Cannot find module \"so many time wasted here\""); e.code = 'MODULE_NOT_FOUND'; throw e; }())); 

有人可以提供一个小例子吗? 或链接到样板应用程序?

PS这是我的第一个电子应用程序。 也许我试图做错什么? 任何build议,高度赞赏。


UPD:好的,感谢这个线程我已经解决了这个问题。

TL; DR:

的外部

指示不应该由webPack捆绑的依赖关系,而是由生成的捆绑包保持请求。

定义:

 externals: [ "some_module" ], 

并使用:

 var someMethod = require('some_module'); console.log(someMethod());