(react) externals 配置防止将某些 import 的包(package)打包到 bundle 中

最新推荐文章于 2023-06-06 17:41:41 发布

weixin_41779718

最新推荐文章于 2023-06-06 17:41:41 发布

阅读量1.4k

点赞数

分类专栏： React 文章标签： reactjs

本文链接：https://blog.csdn.net/weixin_41779718/article/details/106381977

版权

React 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

webpack 中的 externals 防止将某些 import 的包(package)打包到 bundle 中

modules.export = {
  plugins: [
    new HtmlWebpackPlugin({
      title: 'React Board',
      files: { // 配置 CDN 引入
        js: [
          '//unpkg.com/swiper/js/swiper.min.js'
        ],
        css: [
          '//unpkg.com/swiper/css/swiper.min.css'
        ]
      }
    })
  ],
  externals: {
  	swiper: 'Swiper'
  }
}

index.html 设置：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title><%= htmlWebpackPlugin.options.title %></title>
  <!-- require cdn assets css -->
  <% for (var i in htmlWebpackPlugin.options.files.css) { %>
  <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.files.css[i] %>" />
  <% } %>
</head>

<body>
  <div id="root"></div>
  <!-- require cdn assets js -->
  <% for (var i in htmlWebpackPlugin.options.files.js) { %>
  <script type="text/javascript" src="<%= htmlWebpackPlugin.options.files.js[i] %>"></script>
  <% } %>
</body>

</html>