Webpack write jquery plug-in Environment Configuration

Webpack write jquery plug-in Environment Configuration

The customer needs a drop-down control with a tree structure and a check box. The select2 and autocomplete on the Internet do not meet the requirements. Therefore, I used ztree and bootstrap dropdown to develop a drop-down tree selection control. I decided to use webpack to pack and develop a complete jquery control. By the way, I would like to systematically learn about webpack.

Directory structure:

Package. json Configuration:

{"Name": "select-tree", "version": "0.0.1", "description": "drop-down tree selection with check boxes", "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 version is to be compatible with IE9 browser, development environment with webpack's Watch Mode, because the project is relatively small, debugging directly with chrome open dist/select-tree.html files.

Webpack. config. js code:

Const path = require ('path'); const webpack = require ('webpackage'); const HtmlWebpackPlugin = require ('html-webpack-plugin '); const UglifyJSPlugin = require ('uglifyjs-webpack-plugin'); module. exports = {entry: {vendor: ['jquery '], // separate the plug-in to be introduced from the plug-in main :'. /src/select-tree.js '}, output: {filename: 'select-tree-min.js', path: path. resolve (_ dirname ,'. /dist '), library: 'selecttree', // plug-in name libraryTarget: 'umd' // The plug-in supports CommonJS2, CommonJS, amd, var}, // resolve: {// the path of jquery downloaded by npm is not required. // modules: [path. join (_ dirname, "node_modules")], // alias: {// jquery: 'jquery/dist/jquery. js' //}, module: {rules: [{test :/\. css $/, use: ['style-loader ', 'css-loader']}, plugins: [new HtmlWebpackPlugin ({// automatically generate html template :'. /src/select-tree.html ', filename: 'select-tree.html'}), new UglifyJSPlugin ({// compressed code sourceMap: true}), new webpack. optimize. commonsChunkPlugin ({// package the jq plug-in separately. The dependent libraries of this plug-in are extracted separately without affecting the plug-in development name: "vendor", filename: "vendor. min. js "}), new webpack. providePlugin ({// automatically load jq $: 'jquery ', jquery: 'jquery'})], devtool: 'source-map' // facilitates debugging };

Note: focus on output. library and output. libraryTarget