Add support for webpack dev server to inject in-memory build assets into AEM served pages

[prowner]

Description

Webpack dev server should proxy content pages from AEM and inject it's in-memory assets in the page. This way the dev server will create the bundles in memory. Webpack provisioned clientlibs should not be proxied.

For the ui.frontend.react, this requires rewiring the CRA Webpack config.

Related Issue

#631

Motivation and Context

Webpack dev server only proxies, but still requires a build to provision the clientlibs. Live reloading is not supported with watch.

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• [x] I have signed the Adobe Open Source CLA.
• [x] My code follows the code style of this project.
• [ ] My change requires a change to the documentation.
• [ ] I have updated the documentation accordingly.
• [x] I have read the CONTRIBUTING document.
• [ ] I have added tests to cover my changes.
• [x] All new and existing tests passed.

[lgtm-com[bot]]

This pull request introduces 1 alert when merging 6e42ba46d487a8d33848a016346896f323480808 into 89be8147e118317ca851519a9776eb43675d9545 - view on LGTM.com

new alerts:

• 1 for Syntax error

[bartosz-wesolowski-wttech]

Hi @robinalaerts1, I am testing this PR locally, I built the archetype and generated project based on the new version using your branch. After running npm install and then npm run start in ui.frontend (general FE module used) I got the following error:

× ｢wds｣: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'publicPath'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, infrastructureLogging?, loader?, mode?, module?, name?, node?, optimization?, outp
ut?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, serve?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           publicPath: …
         }
       })
     ]

Is this some kind of version miss-match ? Not sure whether it's important - I am testing this on windows 10, npm 6.14.6, node v12.18.3

Sample project generated using the following command:

mvn -B archetype:generate \
 -D archetypeGroupId=com.adobe.aem \
 -D archetypeArtifactId=aem-project-archetype \
 -D archetypeVersion=27-SNAPSHOT \
 -D appTitle="My Site test" \
 -D appId="mysite-test" \
 -D groupId="com.mysitetest"

To fix that locally I added the following output object inside webpack.dev.js

output: {
            publicPath: '/'
        },
        devServer: {
            inline: true,
            proxy: [{
                context: [
                    '/content',
                    '/etc.clientlibs/'
                ],
                target: 'http://localhost:4502',
            }],
            before: (app, server, compiler) => {
                app.use(injectScripts(compiler));
            },
        }

Also it seems that '/etc.clientlibs/*/clientlibs/clientlib-base.*.*' does not work properly as it causes error:

Error: [HPM] Invalid context. Expecting something like: ["/api", "/ajax"] or ["/api/**", "!**.html"]