webpack引入jquery和layer插件

前言:node.js和webpack的安装和配置,就不介绍了。这里引用一个webpack+react的项目,来讲解webpack引入jquery和layer.js。

1、下载layer插件,包括layer.css和layer.js。

        下载地址:layer.js官网

2、npm安装jquery。

         安装命令:npm install --save-dev jquery

3、修改webpack的配置文件webpack.config.js


webpack.config.js


           3.1、下图所示:webpack在构建包的时候会按目录的进行文件的查找,resolve属性中alias可以设置通过变量名引入插件(文件)。一个变量代表一个模块。如:layer: __dirname + '/assets/js/layer.js'。这样使用插件时,可以通过import layer from 'layer'引入。


引入layer

           3.2、下图所示:在webpack中添加插件ProvidePlugin,引入已经通过npm安装的jquery。


引入jquery

4、下图所示:页面调用


调用layer

5.效果图


6、常见错误


        6.1、一般是layer.css写法有问题,粗暴点注释掉即可。可参考fly.layui.com/jie/5884/

         6.2、有网友列出几种webpack引入插件的方法,可以参考参考。blog.csdn.net/yiifaa/article/details/51916560

第一次下笔记,有点乱==



最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 12,554评论 7 35
  • 最近在学习 Webpack,网上大多数入门教程都是基于 Webpack 1.x 版本的,我学习 Webpack 的...
    My_Oh_My阅读 12,525评论 40 247
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 14,341评论 7 110
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 10,706评论 4 31
  • 在这渐行渐远的日子里,我以为所有的一切会随着时间一点一点的淡忘,直到想起你的时候所有的回忆都是往事,而不在留恋,可...
    不念过往0227阅读 1,877评论 0 0

友情链接更多精彩内容