Search code examples
webpackvisual-studio-2017outputtask-runner-explorer

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


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).

  1. 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?


Solution

  • 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