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文件之后，块内容:

[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.xNode.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 -资产- qa - 1302115263. - file.myqcloud.com/uma -前-资产main/qa/20210903143651/geojson eab57d6e.c3fd52b3ff86.js

您可以在文件中搜索c9，您可以找到一些类似的情况。

这些情况并不一定存在。在不同的机器上出现的错误散列是不同的，或者在某些机器上不出现。源内容的更改也会影响这些错误散列的内容。

Answer 1

• 将长号转换为字符串(备选方案)
• 将terserPlugin替换为其他插件，如uglifyJSPlugin(如果使用terserPlugin进行优化)