diff --git a/README.md b/README.md index fd5cd66c..5032bb09 100644 --- a/README.md +++ b/README.md @@ -48,9 +48,11 @@ Options can be passed in to `MonacoWebpackPlugin`. They can be used to generate * `output` (`string`) - custom output path for worker scripts, relative to the main webpack `output.path`. * default value: `''`. +* `publicPath` (`string`) - custom public path for worker scripts, overrides the public path from which files generated by this plugin will be served. This wins out over Webpack's dynamic runtime path and can be useful to avoid attempting to load workers cross-origin when using a CDN for other static resources. Use e.g. '/' if you want to load your resources from the current origin.. + * default value: `''`. * `languages` (`string[]`) - include only a subset of the languages supported. * default value: `['apex', 'azcli', 'bat', 'clojure', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dockerfile', 'fsharp', 'go', 'handlebars', 'html', 'ini', 'java', 'javascript', 'json', 'less', 'lua', 'markdown', 'msdax', 'mysql', 'objective', 'perl', 'pgsql', 'php', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'r', 'razor', 'redis', 'redshift', 'ruby', 'rust', 'sb', 'scheme', 'scss', 'shell', 'solidity', 'sql', 'st', 'swift', 'typescript', 'vb', 'xml', 'yaml']`. - + Some languages share the same web worker. If one of the following languages is included, you must also include the language responsible for instantiating their shared worker: | Language | Instantiator | diff --git a/index.d.ts b/index.d.ts index d5ae5fa6..38b07027 100644 --- a/index.d.ts +++ b/index.d.ts @@ -17,6 +17,14 @@ interface IMonacoEditorWebpackPluginOpts { * Use e.g. '!contextmenu' to exclude a certain feature. */ features?: string[]; + + /** + * Override the public path from which files generated by this plugin will be served. + * This wins out over Webpack's dynamic runtime path and can be useful to avoid attempting to load workers cross- + * origin when using a CDN for other static resources. + * Use e.g. '/' if you want to load your resources from the current origin. + */ + publicPath?: string; } declare class MonacoEditorWebpackPlugin extends Plugin { diff --git a/index.js b/index.js index 92dcf809..2fe0c41b 100644 --- a/index.js +++ b/index.js @@ -48,22 +48,22 @@ class MonacoWebpackPlugin { constructor(options = {}) { const languages = options.languages || Object.keys(languagesById); const features = getFeaturesIds(options.features || [], featuresById); - const output = options.output || ''; this.options = { languages: languages.map((id) => languagesById[id]).filter(Boolean), features: features.map(id => featuresById[id]).filter(Boolean), - output, + output: options.output || '', + publicPath: options.publicPath || '' }; } apply(compiler) { - const { languages, features, output } = this.options; - const publicPath = getPublicPath(compiler); + const { languages, features, output, publicPath } = this.options; + const compilationPublicPath = getCompilationPublicPath(compiler); const modules = [EDITOR_MODULE].concat(languages).concat(features); const workers = modules.map( ({ label, worker }) => worker && (mixin({ label }, worker)) ).filter(Boolean); - const rules = createLoaderRules(languages, features, workers, output, publicPath); + const rules = createLoaderRules(languages, features, workers, output, publicPath, compilationPublicPath); const plugins = createPlugins(workers, output); addCompilerRules(compiler, rules); addCompilerPlugins(compiler, plugins); @@ -80,11 +80,11 @@ function addCompilerPlugins(compiler, plugins) { plugins.forEach((plugin) => plugin.apply(compiler)); } -function getPublicPath(compiler) { +function getCompilationPublicPath(compiler) { return compiler.options.output && compiler.options.output.publicPath || ''; } -function createLoaderRules(languages, features, workers, outputPath, publicPath) { +function createLoaderRules(languages, features, workers, outputPath, pluginPublicPath, compilationPublicPath) { if (!languages.length && !features.length) { return []; } const languagePaths = flatArr(languages.map(({ entry }) => entry).filter(Boolean)); const featurePaths = flatArr(features.map(({ entry }) => entry).filter(Boolean)); @@ -105,6 +105,16 @@ function createLoaderRules(languages, features, workers, outputPath, publicPath) workerPaths['razor'] = workerPaths['html']; } + // Determine the public path from which to load worker JS files. In order of precedence: + // 1. Plugin-specific public path. + // 2. Dynamic runtime public path. + // 3. Compilation public path. + const pathPrefix = Boolean(pluginPublicPath) + ? JSON.stringify(pluginPublicPath) + : `typeof __webpack_public_path__ === 'string' ` + + `? __webpack_public_path__ ` + + `: ${JSON.stringify(compilationPublicPath)}` + const globals = { 'MonacoEnvironment': `(function (paths) { function stripTrailingSlash(str) { @@ -112,7 +122,7 @@ function createLoaderRules(languages, features, workers, outputPath, publicPath) } return { getWorkerUrl: function (moduleId, label) { - var pathPrefix = (typeof __webpack_public_path__ === 'string' ? __webpack_public_path__ : ${JSON.stringify(publicPath)}); + var pathPrefix = ${pathPrefix}; return (pathPrefix ? stripTrailingSlash(pathPrefix) + '/' : '') + paths[label]; } };