webpack优化系列(10)-externals

最新推荐文章于 2024-07-26 15:35:59 发布

Sunsine_C

最新推荐文章于 2024-07-26 15:35:59 发布

阅读量253

点赞数

分类专栏： webpack配置以及优化文章标签： webpack

本文链接：https://blog.csdn.net/ysj1218/article/details/114289657

版权

webpack配置以及优化专栏收录该内容

11 篇文章 1 订阅

订阅专栏

externals

作用

防止将某一些包打包到我们最终的bundle里面导致包体积变大。

场景

jquery我们希望通过csdn链接引入使用，不希望打包到最后的bundle里面，为了避免打包的时候将jquery最终也给打包了，可以配置externals，禁止将jquery打包。

配置

拒绝jQuery打包进到最终的bundle里面, 但是一定要把jquery通过csdn链接引入到html里面。否则打包完后的页面中不能使用jquery

// webpack.config.js

externals: {
    // 忽略库名 --- npm包名
    jquery: 'jQuery'
}

// index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>externals</title>
</head>
<body>
    <div>hello world</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</html>

系列相关

Sunsine_C

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack优化系列(10)-externals

externals作用防止将某一些包打包到我们最终的bundle里面导致包体积变大。场景jquery我们希望通过csdn链接引入使用，不希望打包到最后的bundle里面，为了避免打包的时候将jquery最终也给打包了，可以配置externals，禁止将jquery打包。配置拒绝jQuery打包进到最终的bundle里面, 但是一定要把jquery通过csdn链接引入到html里面。否则打包完后的页面中不能使用jquery// webpack.config.jse
复制链接

扫一扫

专栏目录