问答

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

作者:admin 2021-04-18 我要评论

想使用HtmlWebpackPlugin在craco.config.js对react项目优化,针对个别库使用cdn加载,但是发现如下配置后,htmlWebpackPlugin.options.files.js这里会报错files下...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

想使用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>
<% } %>
###

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

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • nginx响应速度很慢

    nginx响应速度很慢

  • 点击选中的多选框,会在已选那一栏显示

    点击选中的多选框,会在已选那一栏显示

  • PHP 多态的理解

    PHP 多态的理解

  • 关于C语言中static的问题

    关于C语言中static的问题

腾讯云代理商
海外云服务器