如何在发布到npm的包中正确使用Webpack dynamic import动态导入功能？

• 优先使用Webpack 5自带的output.publicPath: 'auto'配置，该配置会自动根据你包的入口脚本加载路径，计算动态chunk的加载根路径，不需要手动处理路径逻辑，适配绝大多数场景。
• 如果使用Webpack 4不支持auto配置，就在包的入口文件最顶部添加运行时动态修改publicPath的逻辑：

// 必须放在入口文件所有代码执行前
if (typeof document !== 'undefined' && document.currentScript) {
  const currentScriptPath = document.currentScript.src
  __webpack_public_path__ = currentScriptPath.slice(0, currentScriptPath.lastIndexOf('/') + 1)
}

这个内置变量是Webpack提供的运行时公共路径配置，修改后所有后续动态导入的路径都会基于这个值拼接。

• 补充配置output.chunkFilename给你的包的动态chunk加唯一前缀，比如your-pkg-name-[contenthash:8].js，避免和宿主项目的chunk重名冲突。

原生ES规范中import()本身就返回Promise对象，Webpack默认会将其转换为自定义的异步加载逻辑来适配低版本环境，如果要保留原生import()语法，同时正常打包动态模块，可以做如下配置：

• 将Webpack的target配置设置为['web', 'es2020']，指定构建目标为支持ES2020特性的现代浏览器，Webpack会直接保留原生import()语法，不会封装自定义的Promise加载逻辑，同时还是会对动态导入的模块做拆分打包和路径处理。
• 如果你的构建流程用到Babel，需要禁用@babel/plugin-transform-dynamic-import插件，只保留@babel/plugin-syntax-dynamic-import即可，避免Babel层面对import()做额外转换。

内容的提问来源于stack exchange，提问作者Wang Xiao