How to configure webpack.config.js when manual bootstrapping

Help Requests
1

Hi All,

I’m trying to manual bootstrap an Aurelia application using Webpack following this guide:

I’ve altered my main.ts file to use the bootstrap method rather than export a configure function in an otherwise vanilla project (just built a basic application using au cli). I’ve also removed the aurelia-app=“main” html attribute.

The problem i’m running into is that the code in my main module is seemingly never executed. I think this is because I don’t have my webpack.config.js set up correctly for this, the guide says I need to:

In case you use Webpack, you can replace the aurelia-bootstrapper-webpack package with the ./src/main entry file in the aurelia-bootstrapper bundle defined inside of webpack.config.js, and call the bootstrapper manually:

I’m new to webpack though and I’m having difficulty determining what needs to change. What settings do i need to change in my webpack.config.js to accomplish this?

I’ve tried this so far:

entry: {
//app: [‘aurelia-bootstrapper’],
app: [‘./src/main.ts’],

But i get an error that it can’t load ‘aurelia-loader-context’ when I try to build. I’ve also tried this (and variations):

new AureliaPlugin({
  includeAll:true,
  aureliaApp: './src/main.ts'
}),

… it builds, but nothing is loaded in (main doesn’t seem to be executed).

1 Like
2

I believe I’ve implemented what you’re trying to do here. https://github.com/alexdresko/multiautest

I had to use manual bootstrapping to support multiple Aurelia apps.

Pay close attention to the individual commits and let me know if that gets you where you’re looking to go.

1 Like
3

Thanks! That is very close to what I’m trying to do, although I actually want to remove the aurelia-app html attribute if possible and initialize through some other means. The reason for this is that I’d like to have the ability to instantiate the app at a time of my choosing rather than at page load. Still, it’s very helpful to see your repo, thank you.