webpack写jquery插件的环境配置


Posted in jQuery onDecember 21, 2017

客户需求要一个具备树结构、带复选框的下拉选择控件;在网上找到了select2、autocomplete都不满足要求。于是自己用ztree加bootstrap dropdown组合开发了一个下拉树选择控件。决定用webpack打包,开发一个完整的jquery控件,顺便系统的学习一下webpack。

目录结构:

webpack写jquery插件的环境配置

package.json配置:

{
 "name": "select-tree",
 "version": "0.0.1",
 "description": "下拉树形选择,带复选框",
 "license": "MIT",
 "author": "kaikai",
 "repository": "https://gitee.com/hkgit/select-tree",
 "scripts": {
  "start": "webpack --watch",
  "build": "webpack --config webpack.config.js"
 },
 "dependencies": {
  "jquery": "~1.12.4",
  "bootstrap": "^3.3.7",
  "jquery-slimscroll": "latest",
  "ztree": "latest"
 },
 "devDependencies": {
  "css-loader": "^0.28.7",
  "html-webpack-plugin": "^2.30.1",
  "style-loader": "^0.19.1",
  "uglifyjs-webpack-plugin": "^1.1.4",
  "webpack": "^3.10.0"
 },
 "bugs": {
  "url": "https://gitee.com/hkgit/select-tree/issues"
 },
 "keywords": [
  "javascript",
  "select",
  "tree",
  "checkbox"
 ]
}

说明:jquery用1.12的版本是为了兼容IE9浏览器,开发环境用的webpack's Watch Mode,由于项目比较小,调试就直接用chrome打开dist/select-tree.html文件。

webpack.config.js代码:

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: {
    vendor: ['jquery'], // 把需要引入的插件单独分出一个入口,和插件主体分开
    main: './src/select-tree.js'
  },
  output: {
    filename: 'select-tree-min.js',
    path: path.resolve(__dirname, './dist'),
    library: 'selectTree', // 插件名称
    libraryTarget: 'umd' // 插件支持CommonJS2,CommonJS,amd,var
  },
  // resolve: { // npm下载的jquery不需要制定路径
  //   modules: [path.join(__dirname, "node_modules")],
  //   alias: {
  //     jquery: 'jquery/dist/jquery.js'
  //   }
  // },
  module: {
    rules: [{
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({ // 自动生成html
      template: './src/select-tree.html',
      filename: 'select-tree.html'
    }),
    new UglifyJSPlugin({ // 压缩代码
      sourceMap: true
    }),
    new webpack.optimize.CommonsChunkPlugin({ // 单独打包jq插件,此插件的依赖库单独抽出来,不影响插件的开发
      name: "vendor",
      filename: "vendor.min.js"
    }),
    new webpack.ProvidePlugin({ // 自动加载jq
      $: 'jquery',
      jQuery: 'jquery'
    })
  ],
  devtool: 'source-map' // 方便调试
};

说明:重点在output.library和output.libraryTarget

以上就是我们给大家整理的本篇文章的全部内容,如果大家还有任何明白的地方可以在下方的留言区域讨论,感谢对三水点靠木的支持。

jQuery 相关文章推荐
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
jQuery Validate 校验多个相同name的方法
May 18 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
jQuery treeview树形结构应用
Mar 24 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 #jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 #jQuery
jquery自定义显示消息数量
Dec 19 #jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 #jQuery
jquery中done和then的区别(详解)
Dec 19 #jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 #jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 #jQuery
You might like
PL-880隐藏功能
2021/03/01 无线电
修改了一个很不错的php验证码(支持中文)
2007/02/14 PHP
php数组去重实例及分析
2013/11/26 PHP
YII2.0之Activeform表单组件用法实例
2016/01/09 PHP
Yii数据读取与跳转参数传递用法实例分析
2016/07/12 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
jquery多浏览器捕捉回车事件代码
2010/06/22 Javascript
让元素在网页中可拖动示例代码
2013/08/13 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
JS数组合并push与concat区别分析
2015/12/17 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
解决vue-router进行build无法正常显示路由页面的问题
2018/03/06 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
深入浅析python继承问题
2016/05/29 Python
python在Windows下安装setuptools(easy_install工具)步骤详解
2016/07/01 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
Python 解析xml文件的示例
2020/09/29 Python
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
英国标准协会商店:BSI Shop
2019/02/25 全球购物
为什么要用EJB
2014/04/17 面试题
机关单位人员学雷锋心得体会
2014/03/10 职场文书
婚前协议书范本
2014/04/15 职场文书
2014年“世界无车日”活动方案
2014/09/21 职场文书
文明倡议书
2015/01/19 职场文书
证婚人致辞精选
2015/07/28 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书