Web Workers written in Typescript in Webpack 5: SyntaxError: Cannot use import statement outside a module

Question

Webpack 5 documentation 提到 worker-loader 不再需要，javascript 文件似乎很容易。但是，我使用的是 Typescript，但无法使我的 worker.js 输出文件正常工作。当我使用 const worker = new Worker(workerPath); 启动加载 webworker 时，我得到

Uncaught SyntaxError: Cannot use import statement outside a module

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

import Auth from "./auth";

Answer 1

我没有使用 worker-loader 或使用 module.export = {...} 的默认 webpack 配置，而是 exported multiple configurations。具体来说，我在 webpack.config.js 中创建了 2 个入口点（main 和 worker，并使用了 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]

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

Web Workers written in Typescript in Webpack 5: SyntaxError: Cannot use import statement outside a module