如何正确为Webpack导出模块配置添加类型标注？报错修复

错误原因 #

你写的module.exports:any = {...}是把TypeScript的类型语法错误用在了赋值语句里：

• 普通JS文件不支持:加类型的语法，会把any当成值来解析，所以报错“any仅表示类型，但此处被用作值”。
• 就算是TS文件，module.exports是一个内置值，不能直接在后面加:类型来标注，得用正确的类型标注方式。

修复方案 #

分两种场景处理：

场景1：使用普通JavaScript配置文件（webpack.config.js）

如果不需要严格类型校验，直接去掉错误的类型标注即可：

module.exports = {
  devServer: {
    port: 3000,
    historyApiFallback: true, 
  },
};

如果想要获得Webpack配置的类型提示，用JSDoc注释来标注类型：

/** @type {import('webpack').Configuration} */
module.exports = {
  devServer: {
    port: 3000,
    historyApiFallback: true, 
  },
};

这种写法不需要改文件后缀，还能让编辑器给出正确的类型提示。

场景2：使用TypeScript配置文件（webpack.config.ts）

先导入Webpack的配置类型，再通过变量标注类型后导出：

import type { Configuration } from 'webpack';

const config: Configuration = {
  devServer: {
    port: 3000,
    historyApiFallback: true, 
  },
};

module.exports = config;

或者用export default结合satisfies语法（TS 4.9+支持），既能校验类型又保留字面量细节：

import type { Configuration } from 'webpack';

export default {
  devServer: {
    port: 3000,
    historyApiFallback: true, 
  },
} satisfies Configuration;

内容的提问来源于stack exchange，提问作者Екатерина