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

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

1. expose-loader 将库引入到全局作用域
2. webpack.ProvidePlugin 将库自动加载到每个模块

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

expose-loader 将库引入到全局作用域

1. 安装expose-loader

npm i -D expose-loader

2. 配置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')

2. 创建插件对象

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

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
})