Webpack 5.89.0 打包报错：ERROR in ./src/main.ts 34:49 Module parse failed: Unexpected token (34:49)

根据报错信息，这个错误是由于没有适当的加载器来处理.ts文件导致的。你需要在Webpack配置中添加合适的加载器来处理.ts文件。

首先，确保你已经安装了ts-loader，可以使用以下命令进行安装：

npm install ts-loader --save-dev

接下来，在Webpack配置文件中添加以下规则：

module: {
  rules: [
    {
      test: /.ts$/,
      loader: "ts-loader",
      exclude: /node_modules/,
    },
  ],
},
resolve: {
  extensions: ['.ts', '.js'],
},

这样配置后，Webpack会使用ts-loader来处理.ts文件，并将其转换为JavaScript代码。重新运行打包命令，应该就能解决这个错误了。

相关代码示例

// main.ts
import { createApp } from 'vue'
import '@/assets/css/reset.css'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import store from './store'
import { globalAxios } from './request'
import 'video.js/dist/video-js.css' //videojs样式


// 引入element-plus
// import { setupElementPlus } from '@/plugins/elementPlus'

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

// 使用antd

// 创建实例
const setupAll = async () => {
    const app = createApp(App)

    // 使用全局axios
    app.use(globalAxios)

    // 使用vuex
    app.use(store)

    // 使用路由
    app.use(router)

    // setupElementPlus(app)

    for (const name in ElementPlusIconsVue) {
        app.component(name, (ElementPlusIconsVue as any)[name])
    }

    router.beforeEach((to) => {
        if (to.meta) {
            to.meta.notPrefix ? (document.title = to.meta.title) : (window.document.title = '隧道信息化平台' + (to.meta.title ? '-' + to.meta.title : ''))
        }
    })

    router.isReady().then(() => app.mount('#app'))
}

setupAll()

总结

Webpack 5.89.0 打包报错“ERROR in ./src/main.ts 34:49 Module parse failed: Unexpected token (34:49)”通常是因为没有配置合适的加载器来处理 .ts 文件导致的。通过安装和配置ts-loader，可以解决该问题。