第三方库的两种引入方式

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

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

1. 安装expose-loader

   npm i -D expose-loader

2. 配置loader

module: {
  rules: [{
  	// 拿到 node_module 中的 jquery 的绝对路径
    test: require.resolve('jquery'),
    use: {
      loader: 'expose-loader',
      options: '$'  // 将它注入到全局模块, window中
    }
  }]
}

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

• webpack.ProvidePlugin 将库自动加载到每个模块

1. 引入webpack

const webpack = require('webpack')

2. 创建插件对象

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

new webpack.ProvidePlugin({
  $: 'jquery', // 到 node_modules 中找 jquery ，注意是小写，如果写大写就找不到，因为 node_modules 目录中的jquery 是小写的
  jQuery: 'jquery'
})