假如项目中需要用到jquery, lodash之类的库, 包含一个全局变量, 需要在webpack中配置
以jquery为例

  • 安装 yarn add jquery
  • 在js中引入, 打印
  • image.png
  • 成功打印
  • image.png
  • 但是并没有挂在在window对象上
  • image.png

expose-loader

使用expose-loader可以将库暴露出去
文档: https://www.npmjs.com/package/expose-loader

  • 安装 yarn add expose-loader
  • 改写引入方式
  • image.png
  • 此时 window.$ 就挂载上jquery, 并且在其他文件上就可以直接使用$
  • 这种loader称为内联loader
  • 或者也可以写到webpack配置
  • image.png image.png

webpack.ProvidePlugin

webpack内置一个插件可以将库注入到每个模块中
文档: https://webpack.js.org/plugins/provide-plugin/#root

  • webpack中配置
  • image.png image.png
  • 此时就可以在js中直接使用$, 但是window.$则会失效

cdn引用方式

在模版代码中用cdn上的jquery, 这样代码中的$和window.$都会生效

  • image.png
  • 并且由于无须将jquery打包, 所以打包后的代码体积也小

  • image.png

  • 但是若是在代码中还是写了 import $ from 'jquery'

  • image.png
  • 此时会将jquery代码打包, 体积变大
  • image.png
  • 此时, 可以通过配置webpack将jquery移除打包范围 https://webpack.docschina.org/configuration/externals/
  • image.png
  • 再次打包即可发现打包的代码体积减少了
  • image.png