Webpack 3 support

[mheavenor]

It would be nice if there was support for webpack 3 as well. This is a requirement for me as I am using create-react-app. The below comment also mentions that vue uses webpack 3 as well.

This comment mentions the problem code. I made the fix as per timkendrick's following comment but ran into issues with webpack.webworker being undefined. I changed the way that the SingleEntryPlugin, LoaderTargetPlugin and WebWorkerTemplatePlugin get required and this fix works for me locally. It would be great if this could make it into the repo somehow.

Below is my working local version of AddWorkerEntryPointPlugin.js

const singleEntry = require('webpack/lib/SingleEntryPlugin');
const loaderTarget = require('webpack/lib/LoaderTargetPlugin');
const webworker = require('webpack/lib/webworker/WebWorkerTemplatePlugin');

class AddWorkerEntryPointPlugin {
  constructor({
    id,
    entry,
    filename,
    chunkFilename = undefined,
    plugins = undefined,
  }) {
    this.options = { id, entry, filename, chunkFilename, plugins };
  }

  apply(compiler) {
    const { id, entry, filename, chunkFilename, plugins } = this.options;
    compiler.plugin('make', (compilation, callback) => {
      const outputOptions = {
        filename,
        chunkFilename,
        publicPath: compilation.outputOptions.publicPath,
        // HACK: globalObject is necessary to fix https://github.com/webpack/webpack/issues/6642
        globalObject: 'this',
      };
      const childCompiler = compilation.createChildCompiler(id, outputOptions, [
        new webworker(),
        new loaderTarget('webworker'),
        new singleEntry(compiler.context, entry, 'main'),
      ]);
      plugins.forEach((plugin) => plugin.apply(childCompiler));
      childCompiler.runAsChild(callback);
    });
  }
}

module.exports = AddWorkerEntryPointPlugin;

[xeoneux]

@alexandrudima will this be supported for webpack 3 in near future?

[alexdima]

@xeoneux PR welcome to the plugin (is it possible to check the version at runtime?) or to the documentation in https://github.com/Microsoft/monaco-editor or in https://github.com/Microsoft/monaco-editor-samples.

[xeoneux]

@alexandrudima I'd send a PR if I could find a way to check the webpack version at runtime.

[brijeshb42]

Based on @mheavenor 's snippet, this code supports both webpack v3 and 4

const webpack = require('webpack');
const webpackVersion = require('webpack/package.json').version;
const SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin');
const LoaderTargetPlugin = require('webpack/lib/LoaderTargetPlugin');
const WebWorkerTemplatePlugin = require('webpack/lib/webworker/WebWorkerTemplatePlugin');


function getCompilerHook(compiler, {id, entry, filename, chunkFilename, plugins}) {
  return function(compilation, callback) {
    const outputOptions = {
      filename,
      chunkFilename,
      publicPath: compilation.outputOptions.publicPath,
      // HACK: globalObject is necessary to fix https://github.com/webpack/webpack/issues/6642
      globalObject: 'this',
    };
    const childCompiler = compilation.createChildCompiler(id, outputOptions, [
      new WebWorkerTemplatePlugin(),
      new LoaderTargetPlugin('webworker'),
      new SingleEntryPlugin(compiler.context, entry, 'main'),
    ]);
    plugins.forEach((plugin) => plugin.apply(childCompiler));
    childCompiler.runAsChild(callback);
  }
}


class AddWorkerEntryPointPlugin {
  constructor({
    id,
    entry,
    filename,
    chunkFilename = undefined,
    plugins = undefined,
  }) {
    this.options = { id, entry, filename, chunkFilename, plugins };
  }

  apply(compiler) {
    const compilerHook = getCompilerHook(compiler, this.options);
    if (webpackVersion < '4') {
      compiler.plugin('make', compilerHook);
    } else {
      compiler.hooks.make.tapAsync('AddWorkerEntryPointPlugin', compilerHook);
    }
  }
}

module.exports = AddWorkerEntryPointPlugin;

[ktalebian]

@brijeshb42 how are you supposed to use this? This is to replace AddWorkerEntryPointPlugin that's within monaco-editor-webpack-plugin module. So how do I use this without having to touch the source code?

[brijeshb42]

@ktalebian You can't use it without modifying the source. I forked this repo and am using my own fork for now.

[xeoneux]

@brijeshb42 could you create a PR?

[brijeshb42]

Created #19