Webpack构建Todo应用时JS文件间导入报错求助

问题场景 #

我正在使用Webpack构建Todo应用，能够将其他JS文件导入index.js，但JS文件之间相互导入时，持续出现“SyntaxError: cannot use import statement outside a module”错误。

相关代码 #

task.js（被ui.js导入）

import { v4 as uuidv4 } from 'uuid';

export class Task {
  constructor(title, description, dueDate) {
    return Object.assign(this, { id: uuidv4(), title, description, dueDate, completed: false })
  }
}

ui.js

import { Task } from './task.js';

const taskOne = new Task('Hello', "goodbye")

console.log(taskOne);

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
    assetModuleFilename: '[name][ext]'
  },
  devtool: 'source-map',
  devServer: {
    static: {
      directory: path.resolve(__dirname, 'dist')
    },
    port: 3000,
    open: true,
    hot: true,
    compress: true,
    historyApiFallback: true
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.(png|jpg|jpeg|svg|gif)$/i,
        type: 'asset/resource'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Todo App',
      filename: 'index.html',
      template: './src/template.html'
    })
  ]
}

修复步骤 #

1. 确保所有JS文件都在Webpack的依赖链中 #

Webpack只会打包入口文件（src/index.js）及其递归导入的文件。如果ui.js没有被index.js导入，它不会被打包，浏览器直接加载未打包的ui.js时就会触发模块语法错误。

在index.js中添加对ui.js的导入：

// src/index.js
import './ui.js';

2. 检查导入路径的正确性 #

确认ui.js中导入task.js的相对路径无误，比如两者在同一目录下时，路径应为./task.js，避免路径错误导致Webpack无法解析依赖。

3. 安装Babel相关依赖 #

你的Webpack配置中使用了babel-loader，但如果未安装对应依赖，会导致ES6+语法转译失败。执行以下命令安装：

npm install --save-dev babel-loader @babel/core @babel/preset-env

4. 避免在HTML中直接引入未打包的JS文件 #

检查src/template.html，确保没有手动引入task.js或ui.js。HtmlWebpackPlugin会自动将打包后的bundle.js注入到生成的index.html中，手动引入未打包文件会让浏览器直接解析ES模块语法，引发错误。

5. 验证打包流程 #

运行npm run build（需确保package.json中有"build": "webpack"脚本），检查dist目录是否生成bundle.js。然后用npm run dev启动开发服务器，确保页面加载的是打包后的文件。

验证 #

完成上述步骤后，重启开发服务器，控制台应能正常打印taskOne对象，不再出现模块语法错误。

内容的提问来源于stack exchange，提问作者Brandon Bryan