{"library":"monaco-editor-webpack-plugin","title":"monaco-editor-webpack-plugin","description":"A webpack plugin that simplifies bundling Monaco Editor with webpack by automatically handling worker scripts and language/feature loading. Currently at version 7.1.1, it supports webpack 4.5+ and 5.x, with peer dependencies on monaco-editor >=0.31.0. Key differentiator: eliminates manual configuration for Monaco's web workers, CSS, and fonts, while offering granular control over included languages and features to reduce bundle size. Ships TypeScript types and requires additional loaders (style-loader, css-loader) for CSS and file-loader for fonts.","language":"javascript","status":"active","last_verified":"Sat Apr 25","install":{"commands":["npm install monaco-editor-webpack-plugin"],"cli":null},"imports":["import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin'","import * as monaco from 'monaco-editor'","import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"// webpack.config.js\nconst MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');\nconst path = require('path');\n\nmodule.exports = {\n  entry: './index.js',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'app.js'\n  },\n  module: {\n    rules: [\n      { test: /\\.css$/, use: ['style-loader', 'css-loader'] },\n      { test: /\\.ttf$/, type: 'asset/resource' }\n    ]\n  },\n  plugins: [new MonacoWebpackPlugin()]\n};\n\n// index.js\nimport * as monaco from 'monaco-editor';\n\nmonaco.editor.create(document.getElementById('container'), {\n  value: 'console.log(\"Hello, world\")',\n  language: 'javascript'\n});","lang":"javascript","description":"Configures webpack with MonacoWebpackPlugin, loads Monaco Editor, and creates an editor instance.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}