ESNext webpack via au build not using aurelia_project.environments file values

[ajoslin103]

I'm submitting a bug report

au --version 1.0.0-beta.6

OS X 10.14.3

node -v v10.14.0

npm -v 6.7.0

ESNext & Webpack

When I specify different values for baseUrl in my aurelia_project environment files they are NOT propagated into the .../dist/index.js file (via the index.ejs template)

When I add some commenting I can see that the aurelia environment files values have not been imported into the HtmlWebpackPlugin metadata area -- since they are referenced directly from the module export in webpack.config.js it seems too late to do anything about that...

How can I get the dist index.js to use values from the aurelia_project environment files ?

[3cp]

The env file is copied from aurelia_project/environments/name.js to src/environment.js everytime when you run au build or au run. It can be used in any source file.

For example the src/main.js uses it like this import environment from './environment';. Use those values in your code, you don't need to touch webpack config.

[ajoslin103]

Usage within my source files has never been a problem at all, that works very well.

My problem with those environments files comes in during the setup of the build process.

The contents of index.ejs include this line:

    <base href="<%- htmlWebpackPlugin.options.metadata.baseUrl %>”>

But I cannot figure out how to get baseUrl from the environment file into the htmlWebpackPlugin.options.metadata before the webpack.config.js file is imported.

On Mar 25, 2019, at 5:17 PM, huochunpeng [email protected] wrote:

The env file is copied from aurelia_project/environments/name.js to src/environment.js everytime when you run au build or au run. It can be used in any source file.

For example the src/main.js uses it like this import environment from './environment';. Use those values in your code, you don't need to touch webpack config.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/aurelia/cli/issues/1077#issuecomment-476380914, or mute the thread https://github.com/notifications/unsubscribe-auth/AAbF9W1vTZqGRx1B3aIwKw3WTiEZGoa_ks5vaTzUgaJpZM4cI3DR.

[3cp]

The baseUrl is directly written in your webpack.config.js

const baseUrl = '/';
// ...
  new HtmlWebpackPlugin({
      template: 'index.ejs',
      metadata: {
        // available in index.ejs //
        title, server, baseUrl
      }
    }),

[3cp]

If you wonder about this line in webpack.config.js.

module.exports = ({ production, server, extractCss, coverage, analyze, karma } = {}) => ({

It was called by aurelia_project/tasks/run

import {config} from './build';
//...
  const compiler = webpack(config);

The config in aurelia_project/tasks/build

const production = CLIOptions.getEnvironment() === 'prod';
const server = buildOptions.isApplicable('server');
const extractCss = buildOptions.isApplicable('extractCss');
const coverage = buildOptions.isApplicable('coverage');

const config = webpackConfig({
  production, server, extractCss, coverage, analyze
});

It means you can control production with au run --env prod control server, extractCss, coverage in aurelia_project/aurelia.json "build.options" (which enable option based on environment). "extractCss": "prod" means true for production build, false for everything else.

[3cp]

I agree this is overly complicated, I prefer those options were directly written in webpack.config.js instead of jumping through 4 files.

[ajoslin103]

Yes, in another project I went through the rigamarole of changing the params to the module.exports = ({ production, server, ... in the webpack.config.js file and then changing the params that it was called with from build and run...

I was hoping that someone had a better solution. Something that wan't so project-specific and involved changing so many files that are delivered by: au new

I would rather they were not written into webpack.config.js as they are then in two places. They belong in the environments files. They should be propagated from those into whatever config files are being used for whatever build tools are being executed.

I don't know enough to do all that, and only need the baseUrl right now -- but I have to keep re-writing that between dev/stage/prod when it's in the webpack.config.js

If I knew more about how it all worked I'd be able to put the contents of the selected environment file into the htmlWebpackPlugin.options.metadata and then have everything else source from there

that would be generic enough to satisfy my peculiar tastes