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.是拿不到的。 **4.在模板已经引入CDN**仍想写`import from 'jquery'`

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

 externals: {
        jquery: '$'
    },

总结

  1. expose-loader 暴露到window上
  2. providePlugin 给每个包提供 $
  3. 引入不打包的方式。
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容