There is environment configuration about jquery plug-in in webpack (detailed tutorial)-JS Tutorial-php.cn

There is environment configuration about jquery plug-in in webpack (detailed tutorial)

亚连

Release： 2018-06-19 14:51:33

Original

1719 people have browsed it

This article tells you about the environment and configuration required to develop jquery plug-ins using webpack. Readers in need may refer to it.

The customer needs a drop-down selection control with a tree structure and check boxes; I found select2 and autocomplete on the Internet, but neither of them met the requirements. So I developed a drop-down tree selection control using a combination of ztree and bootstrap dropdown. I decided to use webpack for packaging, develop a complete jquery control, and learn webpack systematically.

Directory structure:

package.json configuration:

{
 "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"
 ]
}

Copy after login

Description: jquery uses version 1.12 to be compatible with IE9 browsers. Webpack's Watch Mode is used in the development environment. Since the project is relatively small, for debugging, just use chrome to open the dist/select-tree.html file directly.

webpack.config.js code:

const path = require(&#39;path&#39;);
const webpack = require(&#39;webpack&#39;);
const HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;);
const UglifyJSPlugin = require(&#39;uglifyjs-webpack-plugin&#39;);

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

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to implement a table using jQuery CSS

##How to implement a comment framework using Vue

Related reasons why v4 history cannot be accessed

Why can't response.body().string() be called multiple times?

How to implement a calendar using Vue components (detailed tutorial)

The above is the detailed content of There is environment configuration about jquery plug-in in webpack (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!