背景
多束我试图创建一个使用Aurelia一个项目，使用Webpack2进行捆绑销售。该代码使用TypeScript编写。我使用Yarn来处理NPM依赖关系。与奥里利亚+的WebPack 2
我的网页将由多个核心HTML页面组成。这个想法是为每个这些页面都有一个Aurelia应用程序。
因此，每个页面上的index.html将有一个<div aurelia-app="some_module">，每个指的是不同的模块。其中每个都位于自己的包中。它们之间的共享代码分别捆绑在一起。
当前配置
我的目录结构如下所示：
aurelia-webpack/src/monitor/ # main.ts, app.ts, app.html
aurelia-webpack/src/test/ # main.ts, app.ts, app.html
于是开始与我有这样的WebPack配置。我index.html看起来像这样（的{% static东西是从Django中）：
<div aurelia-app="main">
<p>Loading...</p>
<script src="{% static "aurelia-webpack/dist/app.js" %}"></script>
</div>
然后，我有这个配置。
webpack.config.js
var path = require('path');
const { AureliaPlugin } = require('aurelia-webpack-plugin');
const { optimize: { CommonsChunkPlugin }, ProvidePlugin } = require('webpack');
module.exports = {
entry: {
app: ['aurelia-bootstrapper'],
vendor: ['bluebird', 'jquery', 'bootstrap'],
},
output: {
filename: "[name].js",
chunkFilename: "[name].js",
sourceMapFilename: "[name].js.map",
publicPath: "/dist/",
path: path.resolve(__dirname, 'dist')
},
resolve: {
extensions: [".ts", ".js"],
modules: [
"src/monitor",
"node_modules"
].map(x => path.resolve(x))
},
module: {
rules: [
{ test: /\.css$/i, use: ["style-loader", "css-loader"] },
{ test: /\.ts$/, loader: "awesome-typescript-loader" },
{ test: /\.html$/, loader: "html-loader" }
]
},
plugins: [
new AureliaPlugin(),
new ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
}
结果
这正常工作与Hello World应用程式为monitor。当我使用Webpack构建时，我可以看到：
...
[app] ./src/monitor/app.ts 156 bytes {0} [built]
[app.html] ./src/monitor/app.html 57 bytes {0} [built]
[main] ./src/monitor/main.ts 267 bytes {0} [built]
...
而且我可以正常加载页面并按预期进行渲染。
正如你所看到的我使用aurelia-webpack-plugin以及aurelia-bootstrapper。如果我已经正确地理解了它，引导程序是负责在我的<div>上找到aurelia-app标记并根据我所指的模块名称main在那里注入aurelia位。
我main.ts内容：
import { Aurelia, PLATFORM } from 'aurelia-framework';
export function configure(aurelia: Aurelia)
{
aurelia.use
.standardConfiguration()
.developmentLogging();
aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
}
混乱
然而，这两个正在做一些“神奇”的事情，我有以下的困难时期。
例如，我不明白module名称是如何决定的。在这种情况下，它是main，但我从不明确配置。这是通过aurelia-bootstrapper或aurelia-webpack-plugin完成的？
当读取的条目的WebPack手动这是一个更加清晰： https://webpack.js.org/configuration/entry-context/#entry
规则很简单：每个HTML页面一个切入点。 SPA：一个入口点，MPA：多个入口点。
entry: {
home: "./home.js",
about: "./about.js",
contact: "./contact.js"
}
我想
随着上述所有的什么，我现在想的是能够增加更多的入口点/模块/应用程序或任何正确的术语。
我希望能够创建2个或更多索引文件：
监视器：
<div aurelia-app="monitor">
<p>Loading...</p>
<script src="{% static "aurelia-webpack/dist/monitor.js" %}"></script>
</div>
测试：
<div aurelia-app="test">
<p>Loading...</p>
<script src="{% static "aurelia-webpack/dist/test.js" %}"></script>
</div>
每一个有自己捆绑/入口点/模块/应用程序，我如何配置这个与Webpack和Aurelia？
对于aurelia-webpack-plugin的用例是否仅限于一个入口点？我试过为src/monitor/main.ts和src/test/main.ts添加明确的条目，但我没有得到任何正确的工作。
你有过这样的事吗？ – m0ngr31
是的，阅读我发布的答案 – Joakim