webpack原生支持json按需加载，只需用import('./data/config.json')语法即可自动分割为独立chunk并解析为{default: {...}}对象，无需额外配置。
Webpack 默认支持 JSON 文件的按需加载，无需额外配置插件或 loader —— 只要使用动态 import() 语法，JSON 文件就会被自动识别、解析并打包为独立 chunk。
JSON 按需加载的写法
直接在 import() 中引用 .json 文件路径即可，返回的是一个 Promise，resolve 后得到已解析的 JavaScript 对象：
-
✅ 正确写法（推荐）：
import('./data/config.json').then(data => console.log(data.default)) -
✅ 支持 async/await：
const config = await import('./data/config.json');
注意：导入结果是{ default: {...} }形式，所以通常取config.default -
❌ 不要写成
require('./data/config.json')：这是同步加载，会打入主 bundle，失去“按需”意义
Webpack 如何处理 JSON 动态导入
Webpack 在遇到 import('./xxx.json') 时会：
- 自动调用内置的
JsonPlugin，将 JSON 内容转为模块导出module.exports = { ... } - 生成单独的 chunk（如
config.abc123.chunk.js），内容是包裹后的 JS 模块，不是原始 JSON 文本 - 运行时通过 script 标签加载该 chunk，并执行其导出逻辑，最终返回
{ default: parsedJson }
命名与可读性优化
可用 Webpack 注释指定 chunk 名称，便于调试和缓存管理：
import(/* webpackChunkName: "config" */ './data/config.json')- 配合
output.chunkFilename: 'js/[name].[contenthash].chunk.js'，生成类似js/config.a1b2c3.chunk.js的文件
注意事项
实际使用中需留意几点：
- JSON 文件必须是合法格式（不能有注释、尾逗号等）；否则构建报错
- 导入路径必须是字符串字面量（不能是变量拼接），否则 Webpack 无法静态分析，会退化为全量打包
- 不支持在
import()中传入表达式，例如import(`./data/${env}.json`)会导致 Webpack 打包所有匹配文件 - 如果项目启用了
experiments.topLevelAwait: true，也可直接写const data = await import('./data/config.json')，顶层 await 会被正确处理
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
