配置Webpack output.module后开发环境浏览器报Uncaught SyntaxError: Unexpected token 'export'错误的解决方法

嗨，我刚看完你的问题，这确实是Webpack开启ES模块输出模式后很容易踩的一个坑——咱们一步步来拆解和解决它。

问题根源 #

当你开启experiments.outputModule: true以及output.module、environment.module这些配置后，Webpack会输出ES模块格式的代码（用export/import语法）。但webpack-dev-server在默认情况下，会把这些JS文件当作普通的非模块脚本加载给浏览器，而浏览器加载普通脚本时是不识别ES模块语法的，所以就抛出了Unexpected token 'export'错误。

而你build后用npx serve预览正常，是因为这类静态服务器会自动为ES模块文件设置正确的MIME类型（application/javascript），并且浏览器能正确解析带type="module"的脚本标签——但webpack-dev-server默认没做这些适配。

具体解决方法 #

1. 给html-webpack-plugin添加scriptLoading: 'module'配置（关键！）

如果你用html-webpack-plugin生成入口HTML，必须让它生成的<script>标签带上type="module"属性，否则浏览器还是会把ES模块代码当成普通脚本解析。

修改你的plugins配置：

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

export default {
  // ... 其他现有配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html', // 你的模板路径
      scriptLoading: 'module' // 加上这行，让脚本以模块方式加载
    }),
    // ... 其他插件
  ]
};

2. 为webpack-dev-server配置适配ES模块的响应头和MIME类型

在devServer配置里添加响应头和MIME类型映射，确保webpack-dev-server返回的JS文件被浏览器识别为ES模块：

export default {
  // ... 其他现有配置
  devServer: {
    // 你的现有devServer配置（比如port、hot等）
    headers: {
      "Cross-Origin-Embedder-Policy": "require-corp",
      "Cross-Origin-Opener-Policy": "same-origin"
    },
    mimeTypes: {
      javascript: ["application/javascript", "module"]
    }
  }
};

• mimeTypes：告诉devServer把JS文件的MIME类型标记为模块类型，让浏览器知道这是ES模块。
• 那两个Cross-Origin开头的头是为了避免模块加载时的跨域问题，尤其是当你用了toplevelAwait或者动态导入时。

3. （可选）仅在生产环境开启ES模块输出

如果你的开发环境不需要ES模块的特性（比如toplevelAwait可以在开发模式下暂时关闭），可以通过isDev变量条件开启ES模块配置，这样开发环境还是用Webpack默认的CommonJS输出，避免兼容性问题：

const isDev = process.env.NODE_ENV !== 'production';

export default {
  // ... 其他现有配置
  output: {
    // ... 其他现有output配置
    // 仅生产环境开启module相关输出
    module: !isDev,
    environment: {
      module: !isDev,
      dynamicImport: true,
    },
  },
  experiments: {
    // 仅生产环境开启ES模块实验特性
    outputModule: !isDev,
    toplevelAwait: !isDev, // 或者根据需求决定是否在开发环境开启
  },
};

验证方法 #

修改完配置后，完全重启webpack-dev-server（不要热重载，要彻底重启），然后打开浏览器刷新页面，应该就不会再出现Unexpected token 'export'的错误了。

内容来源于stack exchange