9 第三方库的两种引入方式

第三方库的两种引入方式:
  1. expose-loader 将库引入到全局作用域
  2. webpack.ProvidePlugin 将库自动加载到每个模块

可以通过expose-loader进行全局变量的注入,同时也可以使用内置插件webpack.ProvidePlugin对每个模块的闭包空间,注入一个变量,自动加载模块,而不必到处 import 或 require

expose-loader 将库引入到全局作用域
  1. 安装expose-loader
npm i -D expose-loader
  1. 配置loader
module: {
  rules: [{
    test: require.resolve('jquery'),
    use: {
      loader: 'expose-loader',
      options: '$'
    }
  }]
}

tips: require.resolve 用来获取模块的绝对路径。所以这里的loader只会作用于 jquery 模块。并且只在 bundle 中使用到它时,才进行处理。

webpack.ProvidePlugin 将库自动加载到每个模块
  1. 引入webpack
const webpack = require('webpack')
  1. 创建插件对象

要自动加载 jquery,我们可以将两个变量都指向对应的 node 模块

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
})
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 现在的社会人们为了经济的发展而不惜以损害环境为代价。 当人们幡然醒悟之时,地球那层厚厚的外衣已然被撕开了大大的口子...
    岁月如歌_2f28阅读 614评论 1 0
  • 8月的第3周彩丰行的沐浴露终于给我们补货了!我在十加一下的第一单就是他们的沐浴露。 就是这货,我买完后一直在用。味...
    十加一的方程阅读 460评论 0 0
  • 今晚去看了一场艺术系的毕业晚会,原来有那么多的感同身受。 曾经的我,渴望毕业,渴望离开,渴望赚钱。等到我们真的要为...
    aa3af419d099阅读 204评论 0 0
  • 问:要是老婆女朋友的生气了怎么办? 答:把她逗乐! 要是能让她感到极度开心的话,她就没办法痛苦、生气、无聊、无奈…...
    幸福福仔阅读 294评论 0 0
  • 文 风铃 这园子离我家很近,我却有十年没来了。今天终于又进来走走。只见树木还是那样的茂密,修剪的比原来整齐了。斜阳...
    风铃_f1d6阅读 203评论 0 0