Webpack 5:SyntaxError:无法在模块外使用import语句

Question

Webpack 5文档提到不再需要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配置。具体来说，我创建了2个入口点(webpack.config.js中的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]

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