webpack学习记录(五)-全局变量引入问题

webpack学习记录(五)-全局变量引入问题

当我们引入第三方模块的时候，一些模块可能会依赖全局上的变量，但是通过es6语法 import $ from 'jquery'无法将引入的模块挂载到全局上，这里就可以使用expose-loader。

安装

npm i expose-loader

使用

1. 使用内联的loader

   import $ from 'expose-loader?$!jquery';
   console.log(window.$)
   

2. 在webpack.config.js中配置

   module.exports = {
   	module: {
   		rules: [
   			{
   				test: require.resolve('jquery'),	//匹配引入了jquery的js文件
   				use: 'expose-loader?$'
   			}
   		]
   	}
   }
   

3. 在每个模块中注入$对象(这种方法没有挂载到全局上)

   const webpack = require('webpack')
   
   module.exports = {
   	plugins:[
   		new webpack.ProvidePlugin({
   			$: 'jquery'
   		})
   	]
   }
   

注意

当我们通过cdn方式引入了第三方模块的时候，为了在index.js中清楚用了哪些模块，我们可能还会再次用import进行导入，这个时候就应该在添加一个配置项，忽略这次的导入，不然的话又会进行导入，导致文件体积太大。

externals: {	//表示下面的模块不需要打包。
	'jquery': "jQuery"
}