Webpack5使用moment-timezone时latest.json解析报Unexpected token m错误

使用Webpack 5搭配最新版本moment-timezone构建项目时出现如下错误，即使移除非必需的json-loader配置，报错仍会出现：

ERROR in ./node_modules/moment-timezone/data/packed/latest.json
Module parse failed: Unexpected token "m" (0x6D) in JSON at position 0 while parsing near "module.exports = {\"v..."
File was processed with these loaders:
 * ./node_modules/json-loader/index.js
You may need an additional loader to handle the result of these loaders.
JSONParseError: Unexpected token "m" (0x6D) in JSON at position 0 while parsing near "module.exports = {\"v..."

进入node_modules目录查看对应文件可确认，latest.json本身是标准JSON文件，文件内不存在module.exports相关内容。
对应webpack.common.js中的相关配置片段如下：

resolve: {
        alias: {
            Factories: path.resolve(__dirname, '../tests/factories'),
            Components: path.resolve(__dirname, '../src/static/js/components'),
            Icons: path.resolve(__dirname, '../src/static/js/components/icons'),
            Util: path.resolve(__dirname, '../src/static/js/util'),
            '@': path.resolve(__dirname, '../src'),
            Http: path.resolve(__dirname, '../src/static/js/http_service.js'),
            Img: path.resolve(__dirname, '../src/static/img/'),
            Types: path.resolve(__dirname, '../libs/types')
        },
        extensions: ['.ts', '.js', '.vue', '.gql', '.json'],
        fallback: {
            stream: false,
            buffer: require.resolve('buffer/')
        }
    },
    module: {
        rules: [
            { 
                test: /\.m?js/,
                type: "javascript/auto",
                resolve: {fullySpecified: false},
                exclude: /node_modules\/(?!(graphql)\/).*/,

            },
            {
                test: /\.json$/,
                loader: 'json-loader'
            },
...

报错核心是Webpack 5与旧版json-loader的处理逻辑冲突：

• json-loader是Webpack 4及更早版本用于解析JSON的第三方依赖，Webpack 5已原生支持JSON文件解析，会自动将JSON转换为可引用的JS模块，无需额外引入json-loader。
• 配置json-loader处理.json文件时，loader会把原始JSON包装为module.exports = {...}格式的CommonJS代码，后续Webpack 5内置的JSON解析器会将这段输出的JS代码当做原始JSON文本解析，遇到开头字符m（来自module关键字）就会抛出解析错误。
• 源文件中找不到module.exports字段，是因为这段内容是loader处理阶段动态生成的，不存在于原始latest.json文件中。
• 移除json-loader后报错仍存在，一般是构建缓存残留导致，旧的loader处理结果被缓存复用，未触发重新解析。

按以下步骤调整配置即可正常构建：

• 删除配置中针对.json文件的json-loader规则，Webpack 5不需要为JSON文件配置任何额外loader。
• 若需要明确JSON文件解析规则，避免被其他JS/TS规则误匹配，可添加显式配置：

{
  test: /\.json$/,
  type: 'json'
}

• 清除本地构建缓存：删除node_modules/.cache目录，或执行构建命令时追加--no-cache参数，再重新执行构建即可。

内容的提问来源于stack exchange，提问作者Rory Straubel