Background
I'm trying to create a project using Aurelia, using Webpack2 for bundling. The code is written using TypeScript. I use Yarn to handle the NPM dependencies.
My webpage is going to consist of multiple core HTML pages. The idea is then to have one Aurelia App for each of these pages.
So the index.html on each of these pages would have a <div aurelia-app="some_module">, each referring to a different module. Each of these are then located in their own bundle. Shared code between them are in separate bundles.
Current config
My directory structure looks as follows:
aurelia-webpack/src/monitor/ # main.ts, app.ts, app.html
aurelia-webpack/src/test/ # main.ts, app.ts, app.html
So to start with I have this Webpack config. My index.html looks like this (The {% static stuff is from Django):
<div aurelia-app="main">
<p>Loading...</p>
<script src="{% static "aurelia-webpack/dist/app.js" %}"></script>
</div>
Then I have this config.
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"
})
]
}
Result
This works fine with a hello world app for monitor. When I build using Webpack I can see this:
...
[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]
...
And I can load the page fine and it renders as expected.
As you can see I use aurelia-webpack-plugin as well as aurelia-bootstrapper. If I have understood it correctly, the bootstrapper is the one responsible to find the aurelia-app tag on my <div> and injecting the aurelia bits there, based on the module name main that I refer to.
The contents of my 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')));
}
Confusion
However, these two are doing some "magic" things that I have a hard time following.
For example I don't understand how the module name is decided. In this case it's main, but I never configure that explicitly. That is somehow done by aurelia-bootstrapper or the aurelia-webpack-plugin?
When reading the WebPack manual on the entry it is a lot clearer: https://webpack.js.org/configuration/entry-context/#entry
Simple rule: one entry point per HTML page. SPA: one entry point, MPA: multiple entry points.
entry: {
home: "./home.js",
about: "./about.js",
contact: "./contact.js"
}
What I want
With all of the above, what I now want is to be able to add more entry points/modules/apps or whatever the correct term is.
I want to be able to create 2 or more index files:
Monitor:
<div aurelia-app="monitor">
<p>Loading...</p>
<script src="{% static "aurelia-webpack/dist/monitor.js" %}"></script>
</div>
Test:
<div aurelia-app="test">
<p>Loading...</p>
<script src="{% static "aurelia-webpack/dist/test.js" %}"></script>
</div>
each of these having their own bundle/entry point/module/app, how do I configure this with Webpack and Aurelia?
Is the use case for the aurelia-webpack-plugin somehow limited to only one entry point? I've tried adding explicit entries for src/monitor/main.ts and src/test/main.ts but I don't get anything to work properly.
