webpack配置中externals的作用

2018.05.02 09:34 阅读 555

在webpack代码中import导入的包最后打包后,都会打包到bundle。有些情况并不需要将import的包打包到bundle中。

webpack配置文件中externals可以防止import导入的模块最后打包到bundle中。

用标签的写法从cdn中引入

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

然后在webpack配置文件中配置externals

module.exports = {
    externals: {
    "jquery": "jQuery"
  }
}

这样配置好以后,不需要安装jquery的依赖包。和平常用法一样来引入jquery

import $ from 'jquery'

用法是一样的,最大的区别就是,在打包后,jquery不会再bundle中,而是引用的cdn中的文件。