5、webpack如何引入jquery——全局变量引入的问题__webpack注入全局变量

引入第三方库的方法，并且注明哪些方法可以暴露给window

方法一：使用暴露全局的loader：expose-loader，能暴露给window

使用内联loader的方法，能暴露给window

import $ from 'expose-loader?$!jquery'
//这句话的意思就是将jquery以$的形式暴露给window
console.log($)//f 有内容
console.log(window.$)//f 有内容
  使用loader配置的方法，能暴露给window//在webpack.config.js
rules:[
		test:require.resolve('jquery'),//表示只要你引用了jquery，就能匹配到
		use:'expose-loader?$'
//然后在js中
import $ from 'jquery'
console.log($)//f 有内容
console.log(window.$)//f 有内容
 方法二：使用webpack插件，这个方法只要在webpack配置一下，所有模块都可以使用了，但是不会暴露给window
 //在webpack.config.js中
let Webpack = require('webpack');
plugins:[
    new Webpack.ProvidePlugin({
        '$':'jquery'
//在任何js模块中,可以直接使用$，但是这个$不会暴露给window
console.log($)//f 有内容
console.log(window.$)//undefined
 方法三：使用CDN，能暴露给window 
  正常使用：，能暴露给window//header中插入：
<script src="https://lib.baomitu.com/jquery/3.3.1/jquery.js"></script>
//然后直接可以使用
console.log($)//f 有内容
console.log(window.$)//f 有内容
  不正常使用，与安装的jquery混淆使用：，能暴露给window//header中插入：
<script src="https://lib.baomitu.com/jquery/3.3.1/jquery.js"></script>
//然后import混淆使用：
import $ from 'jquery'
console.log($)//f 有内容
console.log(window.$)//f 有内容
   这样会导致在npm run build的时候，将jquery打包进去，但事实上我们用了CDN分发就无需打包进去了，这时候可以用如下配置解决： 
   //在webpack.config.js中
module.exports = {
    externals:{//无需打包的配置,代表这是外部引入的，无需打包
		'jquery':'$'
 我们有以下方法来使用第三方模块： 
expose-loader 暴露到window上，能暴露给window
providePligin 给每个模块注入第三方库(比如$)，不能暴露给window
引入不打包的方式，能暴露给window
                        1.Could not open/create prefs root node Software\JavaSoft\Prefs at root 0x80000002. Windows RegCreateK
                        2.系统测试的策略：15个
                        3.使用PHPCS+GIT钩子保障团队开发中代码风格一致性实践
                        4.pytorch【GradScaler】优化速度
                        5.Deepfacelive使用