webpack配置externals汇总-Toy模板网

这篇具有很好参考价值的文章主要介绍了webpack配置externals汇总。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

webpack@5.88.1
vue@2.7.14
vue-router@3.6.5
element-ui@2.15.13
ant-design-vue@1.7.8

externals用于提取第三方依赖包，使用cdn资源的方式将第三方依赖包引入项目，可以大大减少项目打包体积
配置externals对象有技巧：

key 就是 import aaa from 'bbb'中的bbb
value 可以在引入cdn资源后，在控制台打印window.xxx，value就是 xxx

cdn引入vue

如果npm安装了vue，看不顺眼可以选择卸载，不卸载也是无所谓的

npm un vue

但是vue-template-compiler还是要有的，没有的话需要装一下，注意版本号和vue版本保持一致

npm i vue-template-compiler@2.7.14 -S

index.html

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

webpack.config.js

module.exports = {
    externals: {
      'vue': 'Vue',
    }
  }

然后项目里所有的 import Vue from 'vue' 都可以去掉，注意 Vue 是大写；
原理是通过cdn引入的vue会挂载到 window下面：window.Vue

cdn引入vue-router

index.html

<script defer src="https://cdn.jsdelivr.net/npm/vue-router@3.6.5/dist/vue-router.js"></script>

webpack.config.js

module.exports = {
    externals: {
      'vue-router': 'VueRouter',
    }
  }

项目里所有的import Router from 'vue-router'可以去掉，但要注意把项目里的Router改成VueRouter,原理是vue-router通过cdn的形式导入会自动挂载到window下面：widnow.VueRouter
如果 vue 也是 cdn 形式导入的，那么 Vue.use(Router) 也可以去掉。
原理是 cdn 的 vue-router.js 里已经执行过了window.Vue.use(VueRouter)，如图： webpack配置externals汇总,webpack,前端,node.js

cdn引入element-ui

一开始我想实现无需 cdn 引入 vue 就引入 element-ui，搞了半天发现不行，还是需要先 cdn 引入 vue 之后才可以 cdn 引入 element-ui。

index.html

<!-- 引入vue -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <!-- 引入element-ui -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.css">
  <script defer src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.js"></script>

然后 main.js 里面关于element-ui的都可以删掉：~~import 'element-ui/lib/theme-chalk/index.css';import ElementUI from 'element-ui'Vue.use(Element)~~

并且不需要在webpack.config.js里面的externals配置 element-ui
webpack.config.js

module.exports = {
    externals: {
      'vue': 'Vue',
    }
  }

cdn引入ant-design-vue

也需要先使用 cdn 引入 vue

index.html

<!-- 引入vue -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <!-- 引入ant-design-vue -->
  <link href="https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.8/dist/antd.css" rel="stylesheet">
  <script defer src="https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.8/dist/antd.js"></script>

webpack.config.js

module.exports = {
    externals: {
      'vue': 'Vue',
      'ant-design-vue': 'antd',
    }
  }

其他依赖包都差不多这种套路去配就好了文章来源地址https://www.toymoban.com/news/detail-601983.html

到了这里，关于webpack配置externals汇总的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

webpack配置externals汇总

cdn引入vue

cdn引入vue-router

cdn引入element-ui

cdn引入ant-design-vue

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2