动态导入怎么实现 Chunk 命名

通过给 import() 函数添加魔法注释 /* webpackchunkname: 'name' */ 即可实现 chunk 命名。webpack 会读取该注释中的字符串，将其作为输出文件名的一部分（如 name.js），从而在构建时生成具有特定名称的 chunk。

动态导入中如何命名带参数的 Chunk

当需要为不同参数生成不同的 Chunk 时，可以在魔法注释中使用占位符 [request]。Webpack 会将实际传入的参数值替换到占位符中，生成对应的文件，但需注意这可能导致大量小文件。

动态导入中如何命名带正则匹配的 Chunk

若需根据请求路径的模式进行更精细的控制，可使用正则表达式占位符 [request:regex]。Webpack 会提取匹配的部分并填入文件名，适用于需要统一前缀或后缀的场景。

JavaScript 开发专家

掌握包含 ES6+、异步模式和 Node.js API 的现代 JavaScript。处理 Promise、事件循环和浏览器/Node 兼容性。在 JavaSc

下载

const module = import(/* webpackChunkName: "my-chunk" */ './module');

预期结果：构建后生成名为 my-chunk.js 的文件。

const module = import(/* webpackChunkName: "[request]" */ `./modules/${id}`);

预期结果：若 id 为 user，则生成 ./modules/user.js（路径部分可能被处理）。

const module = import(/* webpackChunkName: "[request:regex(.*?)]" */ './pages/home');

预期结果：提取 home，生成 home.js。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南