Add support for webpack 5 (fixes #124)

package.json

@@ -28,20 +28,18 @@
   },
   "homepage": "https://github.com/Microsoft/monaco-editor-webpack-plugin#readme",
   "peerDependencies": {
-    "webpack": "^4.5.0",
+    "webpack": "^4.5.0 || 5.x",
     "monaco-editor": "0.21.x"
   },
   "devDependencies": {
-    "@types/loader-utils": "^2.0.1",
-    "@types/webpack": "^4.41.22",
-    "css-loader": "^4.3.0",
-    "file-loader": "^6.1.0",
+    "css-loader": "^5.0.1",
+    "file-loader": "^6.2.0",
     "glob": "^7.1.6",
-    "monaco-editor": "^0.21.0",
-    "style-loader": "^1.2.1",
-    "typescript": "^4.0.3",
-    "webpack": "^4.44.2",
-    "webpack-cli": "^3.3.12"
+    "monaco-editor": "^0.21.2",
+    "style-loader": "^2.0.0",
+    "typescript": "^4.1.3",
+    "webpack": "^5.11.0",
+    "webpack-cli": "^4.2.0"
   },
   "dependencies": {
     "loader-utils": "^2.0.0"

src/index.ts

@@ -108,7 +108,7 @@ interface IInternalMonacoEditorWebpackPluginOpts {
   publicPath: string;
 }
 
-class MonacoEditorWebpackPlugin implements webpack.Plugin {
+class MonacoEditorWebpackPlugin implements webpack.WebpackPluginInstance {
 
   private readonly options: IInternalMonacoEditorWebpackPluginOpts;
 
@@ -161,12 +161,19 @@ function addCompilerRules(compiler: webpack.Compiler, rules: webpack.RuleSetRule
   }
 }
 
-function addCompilerPlugins(compiler: webpack.Compiler, plugins: webpack.Plugin[]) {
+function addCompilerPlugins(compiler: webpack.Compiler, plugins: webpack.WebpackPluginInstance[]) {
   plugins.forEach((plugin) => plugin.apply(compiler));
 }
 
 function getCompilationPublicPath(compiler: webpack.Compiler): string {
-  return compiler.options.output && compiler.options.output.publicPath || '';
+  if (compiler.options.output && compiler.options.output.publicPath) {
+    if (typeof compiler.options.output.publicPath === 'string') {
+      return compiler.options.output.publicPath;
+    } else {
+      console.warn(`Cannot handle options.publicPath (expected a string)`);
+    }
+  }
+  return '';
 }
 
 function createLoaderRules(languages: IFeatureDefinition[], features: IFeatureDefinition[], workers: ILabeledWorkerDefinition[], filename: string, pluginPublicPath: string, compilationPublicPath: string): webpack.RuleSetRule[] {

src/loader-utils.d.ts

@@ -0,0 +1,4 @@
+
+declare module 'loader-utils' {
+  export function interpolateName(loaderContext: any, name: string, options?: any): string;
+}

src/plugins/AddWorkerEntryPointPlugin.ts

@@ -9,11 +9,11 @@ export interface IAddWorkerEntryPointPluginOptions {
   entry: string;
   filename: string;
   chunkFilename?: string;
-  plugins: webpack.Plugin[];
+  plugins: webpack.WebpackPluginInstance[];
 }
 
 function getCompilerHook(compiler: webpack.Compiler, { id, entry, filename, chunkFilename, plugins }: IAddWorkerEntryPointPluginOptions) {
-  return function (compilation: webpack.compilation.Compilation, callback: Function) {
+  return function (compilation: webpack.Compilation, callback: (error?: Error | null | false) => void) {
     const outputOptions = {
       filename,
       chunkFilename,
@@ -21,18 +21,18 @@ function getCompilerHook(compiler: webpack.Compiler, { id, entry, filename, chun
       // HACK: globalObject is necessary to fix https://github.com/webpack/webpack/issues/6642
       globalObject: 'this',
     };
-    const childCompiler = (<any>compilation).createChildCompiler(id, outputOptions, [
+    const childCompiler = compilation.createChildCompiler(id, outputOptions, [
       new WebWorkerTemplatePlugin(),
       new LoaderTargetPlugin('webworker'),
     ]);
     new SingleEntryPlugin(compiler.context, entry, 'main').apply(childCompiler);
     plugins.forEach((plugin) => plugin.apply(childCompiler));
 
-    childCompiler.runAsChild(callback);
+    childCompiler.runAsChild((err?: Error, entries?: webpack.Chunk[], compilation?: webpack.Compilation) => callback(err));
   }
 }
 
-export class AddWorkerEntryPointPlugin implements webpack.Plugin {
+export class AddWorkerEntryPointPlugin implements webpack.WebpackPluginInstance {
 
   private readonly options: IAddWorkerEntryPointPluginOptions;
 
@@ -43,7 +43,7 @@ export class AddWorkerEntryPointPlugin implements webpack.Plugin {
   apply(compiler: webpack.Compiler) {
     const compilerHook = getCompilerHook(compiler, this.options);
     if (webpackVersion < '4') {
-      compiler.plugin('make', compilerHook);
+      (<any>compiler).plugin('make', compilerHook);
     } else {
       compiler.hooks.make.tapAsync('AddWorkerEntryPointPlugin', compilerHook);
     }