webpack - webpack将数字编译为json文件中的哈希字符串，该文件具有许多浮点数

Question

源文件：json类型，部分内容：

[118.23901574108356,32.92370127999007],[118.29968387321216,32.77740530001451],[118.39910932763334,32.73089651146488],[118.72017500167505,32.73213674581416],[118.74823530461566,32.83853852013658],[118.79774132670087,32.86507436788773],[118.85737593005518,32.97230296540948],[118.99297488798058,32.96204519293134],

build: js 文件后，chunk 内容：

[118.23901574108356,32.92370127999007],[118.29968387321216,32.777c9db9001451],[118.39910932763334,32.73089651146488],[118.72017500167505,32.73213674581416],[118.74823530461566,32.83853852013658],[118.79774132670087,32.86507436788773],[118.85737593005518,32.97230296540948],[118.99297488798058,32.96204519293134],

我们可以看到内容'32.77740530001451'转移到'32.777c9db9001451'。

并且网页因错误而崩溃：

Uncaught SyntaxError: Unexpected token c in JSON at position 75628
    at JSON.parse (<anonymous>)
    at Object.16954 (geojson-eab57d6e.c3fd52b3ff86.js:formatted:4)
    at r (main-9b24bb21.bundle.js:1)

其他相关信息： webpack 版本：5.40.x Node.js 版本：12.14.1 操作系统：Mac OS

webpack.config.js ：

const path = require('path');
const webpack = require('webpack');
const TerserWebpackPlugin = require('terser-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const CrossoriginWebpackPlugin = require('./crossoriginWebpackPlugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

const envKeyMap = {
  REACT: true,
  PUBLIC: true,
  GENERATE_SOURCEMAP: true,
};

// 构造注入到项目的全局变量
const envConfig = {};
const { env } = process;
for (const k in env) {
  for (const _reservedkey in envKeyMap) {
    if (k.startsWith(_reservedkey)) {
      envConfig[k] = JSON.stringify(env[k]);
      break;
    }
  }
}

const config = {
  entry: './src/index.ts',
  mode: 'production',
  stats: 'normal',
  target: 'web',
  output: {
    filename: '[name]-[fullhash:8].bundle.js',
    publicPath: process.env.PUBLIC_URL_ROOT,
    path: path.resolve(__dirname, 'build'),
    chunkFilename: '[name].[chunkhash:12].js',
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
            },
          },
          'ts-loader',
        ],
        include: path.resolve('src'),
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        include: path.resolve('src'),
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
            },
          },
        ],
      },
      {
        test: /\.css$/,
        use: [
          { loader: MiniCssExtractPlugin.loader },
          {
            loader: 'css-loader',
          },
        ],
      },
      {
        test: /\.s[ac]ss$/,
        oneOf: [
          {
            test: /\.module\.s[ac]ss$/,
            use: [
              MiniCssExtractPlugin.loader,
              {
                loader: 'css-loader',
                options: { modules: true },
              },
              'sass-loader',
            ],
          },
          {
            use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
          },
        ],
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
          'less-loader',
        ],
      },
      {
        test: /\.(png|jpg|gif|svg)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 4096,
            },
          },
        ],
      },
    ],
  },
  resolve: {
    alias: {
      '@src': path.resolve('./src'),
    },
    modules: ['node_modules'],
    extensions: ['.ts', '.tsx', '.js', '.json'],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash:5].css',
    }),
    new CopyPlugin({
      patterns: [
        { from: './src/public/favicon.ico', to: './' },
        { from: './src/public/logo192.png', to: './' },
        { from: './src/public/logo512.png', to: './' },
      ],
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/public/index.html',
      publicPath: process.env.PUBLIC_URL_ROOT,
    }),
    new webpack.DefinePlugin({
      'process.env': envConfig,
    }),
    new CrossoriginWebpackPlugin(),
  ],
  optimization: {
    minimize: true,
    splitChunks: {
      maxSize: 2000000,
      cacheGroups: {
        styles: {
          name: 'styles',
          type: 'css/mini-extract',
          chunks: 'all',
          enforce: true,
          priority: 100,
        },
        geojson: {
          test: /[\\/]src\/constant\/china-geojson[\\/]/,
          name: 'geojson',
          maxSize: 2000000,
          chunks: 'all',
          minChunks: 1,
          priority: 40,
        },
        tencent: {
          test: /[\\/]node_modules\/@tencent[\\/]/,
          name: 'tencent',
          minChunks: 1,
          chunks: 'all',
          priority: 30,
        },
        node_modules: {
          test: /[\\/]node_modules[\\/]/,
          name: 'node_modules',
          minChunks: 1,
          chunks: 'all',
          priority: 20,
        },
        // common: {
        //   name: 'common',
        //   chunks: 'all',
        //   minChunks: 1, // 模块被引用1次以上的才抽离
        //   priority: 10,
        // },
      },
    },
    minimizer: [
      new TerserWebpackPlugin({
        parallel: true,
        exclude: /\/node_modules/,
        extractComments: false,
        terserOptions: {
          warnings: false,
          compress: {
            unused: true,
            drop_debugger: true, // 删除debugger
            drop_console: true, // 删除console
            inline: 2,
          },
        },
      }),
    ],
  },
};

if (process.env.ANALYZER) {
  config.plugins.push(new BundleAnalyzerPlugin());
}

module.exports = config;

这是 cdn 中的构建文件： https ://uma-saas-asset-qa-1302115263.file.myqcloud.com/uma-front-assets-main/qa/20210903143651/geojson-eab57d6e.c3fd52b3ff86.js

你可以在文件中搜索c9，你可以找到一些类似的案例。</p>

这些情况不一定存在。不同机器上出现的错误hash不一样，或者有些机器上不出现。源内容的变化也会影响这些错误哈希的内容。</p>

标签： webpack