webpack全局引入变量

正常情况下，我们需要先安装一个依赖，在使用的使用import进来，例如，我们在项目中使用jquery。

npm install jquery

import $ from 'jquery'; 
console.log($); // 函数
console.log(window.$); // undefined

这样我们就可以在模块中使用定义到全局window了。

1. expose-loader

// loader 分为前置loader，后置loader，内联loader，普通leader
// expose-loader暴露全局的loader
import $ from 'expose-loader?$!jquery'; // 内联laoder使用
console.log($); // 函数
console.log(window.$);  // 函数

2. webpack.config.js配置module.rules

{
    // 把jquery暴露为全局
    test: require.resolve('jquery'),
    use: 'expose-loader?$'
}

import $ from 'jquery';
console.log($); // 函数
console.log(window.$); // 函数

3.在webpack.config.js中进行配置plugins

plugins: [
   new Webpack.ProvidePlugin({ //在每个模块都注入jquery
       $: 'jquery'
   })
]
console.log($); // 函数
console.log(window.$); // 函数

4.jquery-CDN引入的方式

在index.html中引入
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
console.log($); // 函数
console.log(window.$); // 函数