webpack、vite、rollup不直接识别模块格式，需通过loader/plugin配置解析不同语法和资源：webpack依赖module.rules匹配后缀并指定处理器（如babel-loader、ts-loader、css-loader）；vite默认esm按需编译，开箱支持ts/jsx/css预处理器；rollup需插件（如commonjs）处理cjs转esm。
JavaScript 打包工具（如 Webpack、Vite、Rollup）本身不直接“识别”模块格式，而是通过配置加载器（loaders）和插件（plugins）来解析不同语法和资源类型。关键在于告诉打包工具：遇到某种文件扩展名或导入方式时，该用什么规则处理。
配置 loader 处理不同文件类型
Webpack 等基于 loader 的工具依赖 module.rules 匹配文件后缀并指定处理器：
-
.js/.jsx：默认用
babel-loader或esbuild-loader转译 ES 模块、JSX、新语法 -
.ts/.tsx：配
ts-loader或@swc/webpack-plugin解析 TypeScript 模块声明和类型导入 -
.css/.scss/.less：用
css-loader+style-loader（或mini-css-extract-plugin）处理import './style.css' -
.png/.svg/.woff2：通过
asset-module（Webpack 5+）或url-loader将资源转为 URL 或 base64 字符串
启用对动态 import() 和顶层 await 的支持
现代模块特性需明确开启兼容性：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
-
import()动态导入：Webpack 原生支持，无需额外配置；Rollup 需启用output.format: 'es'并确保输入是 ESM - 顶层
await：Node.js ≥14.8+ 和现代打包器（Vite/Rollup 2.8+）默认支持；Webpack 5 需在experiments.topLevelAwait: true下启用 - 条件导出（
exports字段）：Webpack 5+ / Vite 默认遵循package.json中的"exports"，自动匹配import路径与环境（browser/node/default）
适配不同模块标准（CommonJS / ESM / UMD）
打包器会根据入口、依赖和目标环境自动判断模块交互方式，但可手动干预：
- Webpack：
resolve.modules控制查找路径；resolve.extensions定义自动补全后缀（如['.js', '.ts', '.jsx']） - Vite：默认以 ESM 为主，通过
optimizeDeps.include强制预构建 CJS 模块，避免运行时报错 - Rollup：用
external排除不打包的依赖，配合plugins: [commonjs()]解析 CJS 导出为 ESM - 注意
require.resolve、__dirname等 Node.js 特有变量在浏览器环境中不可用，需用插件（如@rollup/plugin-node-resolve）或别名模拟
处理非标准导入（如 JSON、WebAssembly、CSS Modules）
部分导入语法需显式启用解析能力：
-
import data from './data.json' assert { type: 'json' }：Webpack 5+ 支持带assert的导入，也可关闭experiments.topLevelAwait后用json-loader -
import init, { add } from './math.wasm'：Webpack 需experiments.asyncWebAssembly: true；Vite 通过vite-plugin-wasm支持 -
import styles from './Button.module.css'：需css-loader开启modules: true，或 Vite 中默认启用 CSS Modules
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
