在 Webpack 5 中用 Typescript 编写的 Web Workers：语法错误：无法在模块外部使用 import 语句

Question

Webpack 5文档提到worker-loader不再需要了，而且对于 javascript 文件来说似乎很容易。但是，我正在使用 Typescript，并且无法让我的worker.js 输出文件正常工作。当我启动加载网络工作者时const worker = new Worker(workerPath);，我得到

Uncaught SyntaxError: Cannot use import statement outside a module

注意：我的workerPathis"dist/app.worker.js"并且此文件存在，但遗憾的是它包含importorrequire语句，这些语句在浏览器中不起作用。我认为需要将它们捆绑在一起，但我不确定如何。目前，它包含以下代码，我希望将 auth.ts 捆绑在一起：

import Auth from "./auth";

Answer 1

我没有使用worker-loader或使用默认的 webpack 配置module.export = {...}，而是导出了多个配置。具体来说，我创建了 2 个入口点（main和workerin webpack.config.js，并使用module.exports = [main, worker]。在代码中，我使用 引用了第二个入口点const workerPath = "./dist/worker_name.worker.js"。

我的webpack.config.js

const path = require('path')

const main = {
    entry: "./src/index.ts",
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: "dist/"
    },
    context: __dirname,
    devtool: "source-map",
    mode: "development",
    resolve: {
        modules: [
            'src',
            'node_modules'
        ],
        extensions: [
            '.js',
            '.ts',
            '.tsx'
        ],
        plugins: [],
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                options: {
                    transpileOnly: true,
                },
            },
        ],
    },
}

const worker = {
    entry: "./src/worker_name.worker.ts",
    output: {
        filename: 'worker_name.worker.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: "dist/"
    },
    target: "webworker",
    devtool: "source-map",
    mode: "development",
    resolve: {
        modules: [
            'src',
            'node_modules'
        ],
        extensions: [
            '.js',
            '.ts',
            '.tsx'
        ],
        plugins: [],
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                options: {
                    transpileOnly: true,
                },
            },
        ],
    },
}


module.exports = [main, worker]

您可以通过在它们之间共享代码来重构上述内容以使其更短。