客户需求要一个具备树结构、带复选框的下拉选择控件；在网上找到了选择2、自动完成都不满足要求。于是自己用实现版加引导下拉列表组合开发了一个下拉树选择控件。决定用工具打包，开发一个完整的框架控件，顺便系统的学习一下网络包。

目录结构：

package.json配置：

{"名称":"选择树","版本":"0 .0 .1","描述":下拉树形选择，带复选框，' license': 'MIT '，' author': 'kaikai '，' repository ' : ' https://gitee。com/hkgit/select-tree '，' scripts ' : { ' start ' : ' web pack-watch '，' build ' : ' web pack-config。网络包。配置。js ' }，' dependencies ' : { ' jquery ' : ' ~ 1。12 .4 '，'引导程序' :说明：jquery用1.12的版本是为了兼容IE9浏览器，开发环境用的网络包的观看模式，由于项目比较小，调试就直接用铬打开dist/select-tree.html文件。

webpack.config.js代码：

const path=require(' path ')；const web pack=require(' web pack ')；const HTMl WebPACKlugin=require(' HTMl-web pack-plugin ')；const UglifyJSPlugin=require(' uglifyjs-web pack-plugin ')；模块。exports={ entry : { vendor :[' jquery ']，//把需要引入的插件单独分出一个入口，和插件主体分开main: ' ./src/select-tree.js' }，输出： { filename : ' select-tree-min。js '，路径：路径。解析(_ dirname，' ./dist ')，library: 'selectTree '，//插件名称图书馆目标： ' UMD '//插件支持CommonJS2、CommonJS、amd、var }、//resolve: { //npm下载的框架不需要制定路径//模块：[路径。join(_ dirname，' node_modules')]，//alias : {//jquery : ' jquery/dist/jquery。js '/}//}，模块： { rules 3360 [{ test :/ .css$/，use: ['style-loader '，' css-loader'] }] }，plugins :[new html webpacklugin({//自动生成超文本标记语言模板： '。/src/select-tree.html '，filename : ' select-tree。html ' })，新UglifyJSPlugin({ //压缩代码sourceMap: true })，新的网络包。优化。commonschunk插件({//单独打包日本季刊日本季刊插件，此插件的依赖库单独抽出来，不影响插件的开发name: 'vendor '，filename: 'vendor.min.js' })，新网络包.ProvidePlugin({ //自动加载jq $: 'jquery '，jQuery: 'jquery' }) ]，devtool: 'source-map' //方便调试};说明：重点在输出库和output.libraryTarget

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