webpack基础（四）全局变量

全局变量引入问题

• 通过npm引入的jquery由于打包后是在闭包内，所以不会被挂载到window对象上。

epose-loader 暴露全局的loader，内联loader

pre：前面执行的loader
normal： 普通的loader
内联的loader
post ： 后置的loader

1.内联的方式使用：

yarn add expose-loader -D

import $ from 'expose-loader?$!jquery'
// 把jQuery$暴露到全局

2.在配置文件中使用

{
    test: require.resolve('jquery'),
    use: 'expose-loader?$'
}

解决在每个文件中都需要import $ from 'jquery'的问题

在每个模块注入$对象

3.webpack插件

// 在每个模块中都注入$
plugins:[
    new webpack.ProvidePlugin({
            '$':'jquery'
    })
]

window. from 'jquery'`

防止jquery被打包,配置externals属性（与module，plugins相同层级）

 externals: {
        jquery: '$'
    },

总结

1. expose-loader 暴露到window上
2. providePlugin 给每个包提供 $
3. 引入不打包的方式。