客戶需求要一個具備樹結構、帶復選框的下拉選擇控件;在網上找到了select2、autocomplete都不滿足要求。于是自己用ztree加bootstrap dropdown組合開發了一個下拉樹選擇控件。決定用webpack打包,開發一個完整的jquery控件,順便系統的學習一下webpack。
目錄結構:

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
以上就是我們給大家整理的本篇文章的全部內容,如果大家還有任何明白的地方可以在下方的留言區域討論,感謝對武林網的支持。
新聞熱點
疑難解答