TypeScript 中 Webpack 怎么配置 CDN 加载 React 核心库-js教程-PHP中文网

webpack不推荐用cdn加载react构建ts项目，因ts编译依赖本地@types/react等类型包，cdn仅提供运行时js，无法提供类型信息，导致ts报错；externals只影响打包阶段，不影响ts类型检查。

typescript 中 webpack 怎么配置 cdn 加载 react 核心库

Webpack 本身不推荐也不支持用 CDN 加载 React 核心库（react 和 react-dom）来构建 TypeScript 项目，原因很直接：TypeScript 编译和类型检查依赖本地 @types/react、@types/react-dom 包，而这些类型定义与具体版本强绑定；CDN 引入的是运行时 JS，Webpack 无法从中提取类型信息，会导致 TS 编译报错（比如 Cannot find module 'react' 或 JSX 类型错误）。

为什么不能直接用 externals + CDN？

即使你在 webpack.config.js 中配置了 externals 把 react 和 react-dom 排除，并在 HTML 中通过 script 标签引入 CDN 版本，TypeScript 编译器仍会尝试从 node_modules 中解析模块路径和类型。它不会读取 HTML 中的 script 标签，也不会自动映射 CDN URL 到类型声明。

TS 的 import React from 'react' 是编译时行为，必须有对应类型包和模块解析路径
externals 只影响 Webpack 打包阶段，不影响 TypeScript 的 tsc 或 ts-loader 类型检查
若强行移除 react 本地依赖，@types/react 就失去宿主，TS 报错不可避免

可行的替代方案

如果目标是减小打包体积或利用 CDN 缓存，可以用以下更稳妥的方式：

保留本地安装：npm install react react-dom @types/react @types/react-dom —— 这是 TS 项目正常工作的基础
用 externals 剥离运行时依赖：在 Webpack 配置中设置 externals，让最终 bundle 不打包 React，但需确保 HTML 中已提前加载 CDN 版本
配合 webpack.DefinePlugin 注入全局变量（可选）：避免开发时因 externals 导致热更新异常

示例 webpack.config.js 片段：

module.exports = {
  // ...其他配置
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
};

同时，public/index.html 需包含：

php版微信js-sdk支付接口类

下载

<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script><script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

注意：CDN 地址中的版本号（如 @18）必须与你安装的 @types/react 版本严格一致，否则类型不匹配，TS 仍会报错。

开发环境要特别注意

开发时（mode: 'development'），建议使用 UMD 开发版 CDN：

https://unpkg.com/react@18/umd/react.development.js
https://unpkg.com/react-dom@18/umd/react-dom.development.js

这样能获得完整的错误提示和调试支持。生产环境再切换为 production.min.js。

更现代的做法：不配 CDN，改用 SplitChunks

其实多数场景下，与其手动管理 CDN，不如让 Webpack 自动拆分 vendor chunk：

optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      react: {
        name: 'vendors-react',
        test: /[\/]node_modules[\/](react|react-dom)[\/]/,
        priority: 10
      }
    }
  }
}

这样生成独立的 vendors-react.[hash].js，配合 CDN 托管 dist 目录，效果更稳定、可控，且完全兼容 TypeScript。