reactjstypescriptwebpackworker-loader

Webpack eveything loads but the worker


I'm trying to use webpack to bundle my react project. All the modules and everything loads perfectly fine after I defined the webpack_public_path variable. Everything but the worker.

const path = require('path');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = {
    mode: "production",

    resolve: {
        extensions: ["*", ".ts", ".tsx", ".js", ".mjs", ".css", ".ttf"]
    },

    module: {
        rules: [
            {
                test: /\.worker\.js$/,
                use: {
                    loader: 'worker-loader',
                    options: {inline: true}
                },
            },
            {
                test: /\.mjs$/,
                include: /node_modules/,
                type: 'javascript/auto'
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.ttf$/,
                use: ['file-loader']
            },
            {
                test: /\.ts(x?)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "ts-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new MonacoWebpackPlugin({
            languages: ['markdown'],
        })
    ],
    entry: './src/index.tsx',
    output: {
        path: path.resolve(__dirname, 'assets'),
        filename: 'graphqlschemaeditor.js'
    }
};

This is my webpack.config.js

Does anyone have an idea what I'm doing wrong? Thanks a lot


Solution

  • Have you tried to specify an explicit publicPath?

    E.g.

    {
      loader: 'worker-loader',
      options: { publicPath: '/workers/' }
    }
    

    This may resolve loading problems.