Why does Webpack Task Runner for Visual Studio not allow multiple output files?

Question

I am using Visual Studio 2017 with the Webpack Runner extension installed. I have the following TS files:

• /Scripts/TypeA/A.ts
• /Scripts/TypeB/B.ts

And would like to transpile them to the following:

• Scripts/TypeA/A_transpiled.js
• Scripts/TypeB/B_transpiled.js

There is no "clean" way of doing that!

1. Following the "multi-compiler" code example, defining multiple export seems to be supported in Webpack: https://github.com/webpack/webpack/tree/master/examples/multi-compiler. However, this does not work in VS 2017. I get the following error:

   Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema

2. I can use the "name" parameter as shown here:

   output: { filename: '[name].js', path: path.resolve(__dirname, './Scripts/') }

but it would still create all files in the same folder (Scripts).

3. The best, but hacky way of doing this was to make the entire path a part of the entry name as shown here:

   entry: { 'Scripts/TypeA/A_transpiled': './Scripts/TypeA/A.ts', 'Scripts/TypeB/B_transpiled': './Scripts/TypeB/B.ts' }, output: { filename: '[name].js', path: path.resolve(__dirname, '') }

This would create the files in the correct location. However, this has other drawbacks. For example, exporting and using your ts files as a library would then require you to use the entire path (if you use the "name" parameter as the library name), which could get cumbersome.

This seems like a huge drawback/missing functionality. Am I missing something, or did I do something wrong when using the "multi-compiler" approach? Why is something this simple not implemented in Webpack Task Runner? Should I consider getting rid of Webpack altogether and just rely on Gulp or Grunt?

Answer 1

I re-installed webpack using npm so that I have the latest version of webpack (3.11.0). I was able to the "multi-compiler" approach listed in this link:

https://github.com/webpack/webpack/tree/master/examples/multi-compiler