monaco-editor-webpack-pluginを使うのが簡単:

npm i -D monaco-editor-webpack-plugin

次のようにプラグインとして追加するだけで、勝手に設定してくれる:

const MonacoEditorWebpackPlugin = require("monaco-editor-webpack-plugin")

module.exports = {
    plugins: [new MonacoEditorWebpackPlugin()],
}

プレビュー用にここでは以下を追加:

npm i -D webpack-cli webpack-dev-server html-webpack-plugin

webpack.config.js:

const path = require("path")
const MonacoEditorWebpackPlugin = require("monaco-editor-webpack-plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    entry: path.resolve(__dirname, "src", "index.js"),
    plugins: [new MonacoEditorWebpackPlugin(), new HtmlWebpackPlugin()],
    // webpack 6 ではいらなくなるはず:
    experiments: {
        css: true,
    },
}

例えば次のようなJavaScriptとCSSを読み込むと:

src/index.js

import * as monaco from "monaco-editor"
import "./index.css"

monaco.editor.create(
    document.body.appendChild(document.createElement("div")),
    {
        language: "javascript",
        value: `console.log("Hello, 世界")`,
    }
)

src/index.css

html,
body,
body > div {
    height: 100%;
}

画面いっぱいにMonaco Editorが表示されるはず:

webpack serve --mode development