webpack中教你三种方法把变量暴露给全局

项目开发中经常会使用第三方库，以JQury为例：如何将$暴露给全局呢？这里有三种方法，我们一次来看下！

#方法一

借助插件

安装（本代码的版本是："expose-loader": "^0.7.5"）

npm install expose-loader@0 -D  // 这是一个内联loader

引入时可以这么写
 
import $ from 'expose-loader?$!jquery'

console.log(window.$); // 会输出一个函数

'expose-loader?$!jquery'分为四部分：

1. expose-loade：表示laoder
2. ?：类似与传参
3. $：传的参数
4. !jquery：数据源

这时已经将$暴露给全局window了，nice ~~

# 方法二

直接在webpack.config.js中配置

引入

import $ from 'jquery'

配置

module.exports = {
    module:{
        rules:[{
            test: require.resolve('jquery'),
            use: 'expose-loader?$'
        }]
    }
}

console.log(window.$); // 会输出一个函数

这样也可以将$暴露给全局window，nice ~~

# 方法三

利用webpack的插件在每个模块中注入$，配置webpack.config.js如下：

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

console.log($); // 输出一个函数

切记这种方式不是将$暴露给window，是在每个模块中注入了$符号，可直接使用，nice ~~

问题：如果已经通过CDN的形式引入了JQuery，并且也通过import引入了JQuery，在打包时不希望把JQuery也打包进去，该如何？

可以配置webpack.config.js，在打包时排除不打包的第三方库，如下

module.exports = {
   externals: {
      jquery: "$" // 打包时不计算在内
   }
}

expose-loader 最新参考文档