The generated worker files should support chunkhash

[brijeshb42]

Right now, after webpack build, the worker files have names like <language>.worker.js even thought chunkhash has been passed in webpack options. This won't help in cache busting. I think this plugin should use the output option provided in webpack config to build the worker and language files too.

[alexdima]

@brijeshb42 Would you be willing to contribute a PR to add that support?

[brijeshb42]

That is kind of an unknown territory but I'll look into it and try to fix this.

[mheavenor]

@brijeshb42 , I was running into the same issue. Here is how I fixed it, hopefully it gets you pointed in the right direction.

Note: I also had the requirement that the build output go into the static/js directory. This change can be seen below in the index.js file

One of the big difficulties I had lay in the fact that the compiler rules were hard coded as strings in the index.js file. The problem was that editor.worker.[chunkhash:8].js was literally being put into the rules after my changes to the worker's output value . This led me to a solution where I replaced the string with a new filename that had the hash (this logic in AddWorkerEntryPointPlugin.js)

AddWorkerEntryPointPlugin.js:

The following code was placed after const childCompiler and before plugins.forEach

// Listen for the chunk creation for the json editor workers and replace the filepath in the webpack module rules with the proper hashed filepath
    const workerNames = ["editor.worker", "json.worker"];
    const rules = compiler.options.module.rules;
    const jsonEditorRule = rules.find(
      rule =>
        rule.test &&
        rule.test.length &&
        rule.test.some(ruleTest => ruleTest.indexOf("editor.main.js") > -1)
    );
    childCompiler.plugin("compilation", childCompilation => {
      childCompilation.mainTemplate.plugin("asset-path", (path, data) => {
        workerNames.forEach(worker => {
          const pathIndex = path.indexOf(worker);
          if (pathIndex > -1 && jsonEditorRule) {
            const fileName = path.substring(pathIndex);
            const monacoEnvironment =
              jsonEditorRule.use[0].options.globals["MonacoEnvironment"];
            jsonEditorRule.use[0].options.globals[
              "MonacoEnvironment"
            ] = monacoEnvironment.replace(
              worker + ".[chunkhash:8].js",
              fileName
            );
          }
        });
        // We have to return the path as 'asset-path' is expecting a potentially modified path to be returned
        return path;
      });
    });

index.js:

The following replaced the worker object in EDITOR_MODULE:

worker: {
    id: 'vs/editor/editor',
    entry: 'vs/editor/editor.worker',
    // Conditionally add the chunkhash to the production version
    output:
      process.env.NODE_ENV === "production"
        ? "static/js/editor.worker.[chunkhash:8].js"
        : "static/js/editor.worker.js",
    fallback: undefined
  },

The following code added an additional line to the getPublicPath function:

function getPublicPath(compiler) {
  // Use a relative path if we are production to avoid cross domain issues
  if (process.env.NODE_ENV === "production") return "";
  return compiler.options.output && compiler.options.output.publicPath || '';
}

languages.js

The following code replaced the worker object in the json object for the json worker:

worker: {
      id: 'vs/language/json/jsonWorker',
      entry: 'vs/language/json/json.worker',
      // Conditionally add the chunkhash to the production version
      output:
        process.env.NODE_ENV === "production"
          ? "static/js/json.worker.[chunkhash:8].js"
          : "static/js/json.worker.js",
      fallback: 'vs/language/json/jsonWorker',
    },

[victor71]

@mheavenor , have you forked and published to npm?

[mheavenor]

I have not. I have published it only to an internal package server we use at my company.

Feel free to publish it to npm if you would like!