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: '$'