在react中使用HtmlWebpackPlugin进行使用cdn打包优化遇到的问题

Question

想使用HtmlWebpackPlugin在craco.config.js对react项目优化，针对个别库使用cdn加载，但是发现如下配置后,htmlWebpackPlugin.options.files.js这里会报错files下找不到
js,【Template execution failed: TypeError: Cannot read property 'js' of undefined】
加上console.log("start",htmlWebpackPlugin.options,"end")后发现，输出执行了两次，第一次没问题，第二次类似于htmlWebpackPlugin被初始化了，htmlWebpackPlugin下就没有了files，所以问题在哪里呢？

这里是craco.config.js

new HtmlWebpackPlugin({
        title: 'React',
        // filename: 'index.html',
        template: path.resolve(__dirname, './public/index.html'),
        files: { // 配置 CDN 引入
          js: [
            'https://unpkg.com/react@17.0.1/umd/react.production.min.js',
            "https://unpkg.com/react-dom@17.0.1/umd/react-dom.production.min.js",
            "https://unpkg.com/react-redux@7.2.2/dist/react-redux.min.js",
            "https://cdn.bootcdn.net/ajax/libs/react-router-dom/5.2.0/react-router-dom.min.js",
            "https://unpkg.com/antd@4.14.0/dist/antd.min.js",
            "https://unpkg.com/redux@4.0.5/dist/redux.min.js",
            "https://unpkg.com/redux-thunk@2.3.0/dist/redux-thunk.min.js"
          ],
          css: [
              "https://unpkg.com/antd@4.14.0/dist/antd.min.css"
          ]
        }
      }),

这里是index.html

<% console.log("start",htmlWebpackPlugin.options,"end") %>

<% for (var i in htmlWebpackPlugin.options.files.js) { %>
    <script type="text/javascript" src="<%= htmlWebpackPlugin.options.files.js[i] %>"></script>
<% } %>

Answer 1

htmlWebpackPlugin.options 只能有这些配置值 html-webpack-plugin#options。
如果想排除一些固定库，通过 cdn 引入，应该使用 externals
配置项。