How Aurelia Webpack plugin is working?

Question

I've spent recently several hours on Webpack + various frameworks (like Vue) in order to test them a little bit.

Then I've started to work on Aurelia + Webpack, but after hours of search and config tweaking, I can't understand what's going on.

Here's my understanding about webpack :

It grabs one or several entry files, in the entry object
It creates one or several bundles, configured in the output object
all files imported / required in the entry files are being processed by Webpack
Webpack uses loaders in order to apply transformation to files. For example, loader babel with preset es2015 for .js files, Vue loader for .vue files, etc...
You can configure plugins that will do additional processing on top of all of this. For example, HMTLWebpackPlugin will take an HTML template and automatically insert the correct <script> tags corresponding to the bundle you want to generate.

Fine.

So for Aurelia, I've installed aurelia-webpack-plugin + aurelia-loader + aurelia-loader-webpack. But how this is supposed to work in Webpack ?

What I've more or less understood is :

when webpack is launched, the AureliaPlugin kicks in and read everything in the src folder (by default)
from there, I think it's supposed to grab the aurelia-app defined in the index.html and the configuration in the main JS file, then pull all the components defined there.

But it's not working like that, at least, not in my configuration. What I've discovered is that I have to feed aurelia-framework + aurelia-loader + aurelia-loader-webpack as one of Webpack's entries in order to have all my components / apps discovered and processed correctly. If I only feed the main Aurelia JS files (containing Aurelia configuration), Webpack process the file and stops there.

Loading the Aurelia modules in a Webpack entry is something done a lot, for example in the skeleton projects

So, is it something needed ? I have to import / bundle the aurelia-loader and aurelia-loader-webpack in order to have the proper processing of all my Aurelia apps / components ?

If this is something that has to be done in order to correctly process Aurelia, why this is not something done automatically by the plugin ?

I'm not judging, I'm just trying to understand what's done by Webpack when dealing with Aurelia app.

For reference, here's my Webpack configuration :

var path = require('path');
var AureliaWebpackPlugin = require('aurelia-webpack-plugin');
var HTMLWebpackPlugin = require('html-webpack-plugin');

const coreBundles = {
  // these will be included in the 'aurelia' bundle (except for the above bootstrap packages)
  aurelia: [
    'aurelia-framework',
      'aurelia-loader',
      'aurelia-loader-webpack'
  ]
}

module.exports = {
    entry: {
        app: './src/main'
    },
    output: {
        path: "./dist",
        filename: "[name].js"
    },
    plugins: [
        new AureliaWebpackPlugin({
        }),
        new HTMLWebpackPlugin({
            template: "src/index.html"
        })
        ],
    module: {
        loaders: [
            {test: /\.css$/, loader: "style!css"},
            {test: /\.html$/, loader: "html"},
            {test: /\.(png|svg|eot|ttf|woff\d*)$/, loader: "file"}
        ]
    }
};

Thanks for your help,

Alexander Taran Alexander Taran · Accepted Answer · 2018-03-12T10:49:23

It is discussed with a lot of details on the wiki pages of the repo for the plugin

https://github.com/aurelia/webpack-plugin/wiki

How Aurelia Webpack plugin is working?

1 Answers