前言
本文基于 (“react”: “^17.0.2”) 版本
react官方脚手架默认是将 webpack 配置隐藏起来了，在进行配置之前需要将 webpack 配置暴露出来。
1.输入命令 npm run eject
会出现一个命令提示：这是一个单向操作，确认操作后不可逆转/返回?
输入 y 回车
成功之后 在项目根目录出现 config 文件夹
2.打开 config 文件夹下的 webpack.config.js 文件
3.找到 plugins 的 new HtmlWebpackPlugin 配置项，新增红框内的内容（用于配置cdn）
files: { js: [], css: [] } 
4.新增 externals 配置项，和第三步的 plugins 同级（用于配置不进行打包的模块）
externals: {}, 
5.配置 scripts 文件夹下的 build.js
注：因为react开发环境和生产环境使用的是不同文件（可查看package.json的scripts字段），所以直接配置 build.js 文件就可以，不用特意写环境判断代码
注：这里的 plugins 下标，对应的是 webpack.config.js 文件， new HtmlWebpackPlugin() 在 plugins 配置项的对应位置。
config.plugins[0].options.files.js = [ 'https://lib.baomitu.com/react/17.0.2/umd/react.production.min.js', 'https://lib.baomitu.com/react-dom/17.0.2/umd/react-dom.production.min.js', 'https://lib.baomitu.com/redux/4.1.1/redux.min.js', 'https://lib.baomitu.com/redux-thunk/2.3.0/redux-thunk.min.js', 'https://lib.baomitu.com/react-redux/7.2.4/react-redux.min.js', 'https://lib.baomitu.com/axios/0.21.1/axios.min.js', 'https://lib.baomitu.com/lodash.js/4.17.21/lodash.min.js' ]; config.plugins[0].options.files.css = []; config.externals = { 'react': 'React', 'react-dom': 'ReactDOM', 'redux': 'Redux', 'redux-thunk': 'ReduxThunk', 'react-redux': 'ReactRedux', 'axios': 'axios', 'lodash': '_' }; 
6.配置 index.html ,引入配置的CDN js css链接
<!-- require cdn assets css --> <% for (var i in htmlWebpackPlugin.options.files && htmlWebpackPlugin.options.files.css) { %> <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.files.css[i] %>" /> <% } %> <!-- require cdn assets js --> <% for (var i in htmlWebpackPlugin.options.files && htmlWebpackPlugin.options.files.js) { %> <script type="text/javascript" src="<%= htmlWebpackPlugin.options.files.js[i] %>"></script> <% } %> 
7.效果图
如果本篇文章对你有帮助的话，很高兴能够帮助上你。
当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。
原文链接：https://blog.csdn.net/weixin_43233914/article/details/120481908?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165918321816782395361439%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165918321816782395361439&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-19-120481908-null-null.nonecase&utm_term=cdn
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/357
