Javascriptservices: WebpackDevMiddleware and adding command line arguments (i.e. enviornment files)

[jrmcdona]

Hello,
So I am trying to add in webpack support for Environments like you can do with the Angular-cli out of the box.

I will have a mocked enviornment file and additional dev environment without mocks.

I have updated my webpack Aot plugin to do a hostReplacementPaths of the environment default file by replacing with the file based on the environment I specifiy in the build command.

Is this where I need to use WebpackDevMiddlewareOptions EnvironmentVariables to add all of the command link arguments?

Sample command.

"build:devMocked": "webpack --env.target=devMocked --progress --color"

This builds fine and also runs fine with dotnet run.

However, If i use F5 the webpack middleware doesn't know what env/env.target is (the parameter I specified in the command line). See short snipped of the AOT file today where I pass env to the function from the command and it will subsequently error.

function getAotPluginClient(platform, aot, env) {
  const environmentFiles = {
    dev: "./Client/environments/environment.dev.ts",
    devMocked: "./Client/environments/environment.devMocked.ts",
    stage: "./Client/environments/environment.stage.ts",
    prod: "./Client/environments/environment.prod.ts"
  };
    console.log(env);
    console.log(env.target);
   //const envFile = environmentFiles[JSON.stringify(env.target)];

  var aotPlugin = new AotPlugin({
    tsConfigPath: aot ? aotTsconfigs[platform] : tsconfigs[platform],
    skipCodeGeneration: !aot,
    hostReplacementPaths: {
      "../Client/environments/environment.ts": '../Client/environments/environment.devMocked.ts'
    },
    exclude: []
  });

The error:

Exception has occurred: CLR/System.AggregateException
An exception of type 'System.AggregateException' occurred in System.Private.CoreLib.ni.dll but was not handled in user code: 'One or more errors occurred.'
 Inner exceptions found, see $exception in variables window for more details.
 Innermost exception     System.Exception : Call to Node module failed with error: TypeError: Cannot read property 'target' of undefined
    at getAotPluginClient (c:\Users\v-jormc\Source\Repos\Xbox.Ambassadors\Microsoft.Ambassadors\Microsoft.Ambassadors.Web.Client\webpack\webpack.aot.js:31:18)
    at module.exports (c:\Users\v-

Thanks

[jrmcdona]

As I mentioend in Marks's repo this works.

I thought there may be a more dynamic way to do it and maybe there is. If anybody has other ideas but this should work too. The ConfigFile can easily be switched or changed as needed.

 app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions {
          HotModuleReplacement = true,
          ConfigFile = "webpack.devMocked.config.js"
        });

[SteveSandersonMS]

Specifying the ConfigFile is a good way to control this. If we continue to get feedback/questions about this, we could try to find a simpler way to pass through an equivalent to the --env.* command line args.

[kuechlerm]

Hi @SteveSandersonMS, the new webpack 4 demands a --mode command line argument. This issue sounds like that there is no way to do this at the moment. Is this true? Do you consider adding an option to do this?
Without the possibility to add command line arguments, I find it hard to keep using the WebpackDevMiddleware.

[kuechlerm]

For anyone interested in using the WebpackDevMiddleware with Webpack 4.
WebpackDevMiddleware uses the configured webpack.config.js without the --mode option.

You can set the default mode in webpack.config.js like this:

module.exports = (env, argv) => {
    return {
        // set default mode
        mode: argv && argv.mode ? argv.mode : 'development',
        entry: { app: './src/init.ts' },
        output: { 
[...]

When calling webpack --mode production, the production mode gets used.