zoukankan      html  css  js  c++  java
  • webpack之shimming的应用(webpack.ProvidePlugin)

    webpack在引入两个依赖的包时,可能需要使用shimming,意思是处理代码上的兼容

    1、在main.js中引入jquery

    import $ from 'jquery'
    import append from './append'   //下面的给页面添加元素文件
    append()
    

    2、append.js使用main.js的$向页面中添加元素

    function appDomFunc() {
        let dom = document.createElement('div')
        dom.innerHTML = '我是新添加元素'
        // document.body.appendChild(dom)
        $('body').append(dom)
    }
    
    export default appDomFunc
    

    打开浏览器,可以看见append.js报错,找不到jquery,因为webpack是分模块的,这时可以这样处理,使用webpack.ProvidePlugin向项目传递jquery,打开webpack.config.js

    const webpack =require('webpack')
    module.exports = {
        plugins: [
            new webpack.ProvidePlugin({
                $:'jquery'
            })
        ]
    }
    //深入,如果只需要使用jquery.css可以这样配置
        new webpack.ProvidePlugin({
                jcss:['jquery','css']      //jcss代替jquery.css,jcss可以随便命名
            })

    再次打开浏览器,成功运行,可以删除main.js中的jquery的全局引入,因为webpack已经帮我们处理了

  • 相关阅读:
    POJ 1987
    POJ 3107
    POJ 1984
    POJ 1985
    【50】目标检测之目标定位
    【49】计算机视觉现状
    【48】数据扩充(Data augmentation)
    【47】迁移学习(Transfer Learning)
    【46】谷歌 Inception 网络简介Inception(2)
    【45】谷歌 Inception 网络简介Inception(1)
  • 原文地址:https://www.cnblogs.com/uimeigui/p/13967467.html
Copyright © 2011-2022 走看看