第三方库的两种引入方式:
- expose-loader 将库引入到全局作用域
- webpack.ProvidePlugin 将库自动加载到每个模块
可以通过expose-loader进行全局变量的注入,同时也可以使用内置插件webpack.ProvidePlugin对每个模块的闭包空间,注入一个变量,自动加载模块,而不必到处 import 或 require
expose-loader 将库引入到全局作用域
- 安装expose-loader
npm i -D expose-loader
- 配置loader
module: {
rules: [{
test: require.resolve('jquery'),
use: {
loader: 'expose-loader',
options: '$'
}
}]
}
tips: require.resolve 用来获取模块的绝对路径。所以这里的loader只会作用于 jquery 模块。并且只在 bundle 中使用到它时,才进行处理。
webpack.ProvidePlugin 将库自动加载到每个模块
- 引入webpack
const webpack = require('webpack')
- 创建插件对象
要自动加载 jquery,我们可以将两个变量都指向对应的 node 模块
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})