Webpack 4+ support

[jbowtie]

Webpack 4.x now requires a --mode switch to be passed (set to either 'development' or 'production') rather than setting an environment variable. It uses this to override NODE_ENV before invoking any other process.

Watching is no longer supported in production mode.

I don't believe there are any other changes that directly affect this extension.

[nil4]

One issue I see with Webpack 4 is that the command was renamed to webpack-cli, while the task runner expects the entry point to be webpack, and thus fails to execute it, e.g.:

$> cmd /c SET NODE_ENV=development&& webpack --watch --color
'webpack' is not recognized as an internal or external command, operable program or batch file.

[nil4]

And another issue is that Webpack 4 expects a mode parameter to be passed, instead of relying on NODE_ENV values.

To keep compatibility with the way this task runner invokes Webpack, I worked around it like this in webpack.config.js:

module.exports = (env, args) => {
  const prod = (args.mode === 'production' || process.env.NODE_ENV === 'production');
  return [{
     mode: prod ? 'production' : 'development',
     // ... other values ...
  }];
}

[mikemorton]

I get the following error when running with webpack 4.8

c:\project> cmd /c SET NODE_ENV=development&& webpack --watch --color
c:\project\node_modules\webpack\bin\webpack.js:24
let webpackCliInstalled = false;
^^^
SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:404:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Function.Module.runMain (module.js:429:10)
    at startup (node.js:139:18)
    at node.js:999:3
Process terminated with code 1.

[mikemorton]

Nm the issue I reported is fixed by the solution proposed on Issue #49

[mikestu]

Is this issue why the coloring no longer appears when we run our WebPack tasks using Task Runner Explorer, or should I open a new issue around that? We have devs starting to run a watch outside of VS.net now, just to get the coloring back.

[gregoryagu]

This will work if run from the Webpack Task runner, or from NPM. The difficulty is that they pass different parameters:

 module.exports = (env, args) => {
 let isDevBuild = true;  //Assume isDevBuild;

//If being run from NPM, args.mode will be populated
if (args && args.mode === 'production') {
    isDevBuild = false;
}

//Not production mode from NPM, check on Production mode from Task Runner
if (isDevBuild) {
//If being run from the Webpack Task Runner in VS.
const node_env = process.env.NODE_ENV

if (node_env) {
    console.log('node_env=' + node_env)
    if (node_env === 'production') {
        isDevBuild = false;
    }
    else {
    }
}
    }
console.log('isDevBuild=' + isDevBuild);

const cssLoader = { loader: isDevBuild ? "css-loader" : "css-loader?minimize" };
return [{
    target: "web",
    mode: isDevBuild ? "development" : "production",`