Il existe une configuration de l'environnement sur le plug-in jquery dans le webpack (tutoriel détaillé)

Cet article vous parle de l'environnement et de la configuration requis pour développer des plug-ins jquery à l'aide de webpack. Les lecteurs dans le besoin peuvent s'y référer.

Le client a besoin d'un contrôle de sélection déroulant avec une arborescence et des cases à cocher ; j'ai trouvé select2 et autocomplete sur Internet, mais aucun d'eux ne répondait aux exigences. J'ai donc développé un contrôle de sélection d'arbre déroulant en utilisant une combinaison de liste déroulante ztree et bootstrap. J'ai décidé d'utiliser webpack pour l'empaquetage, de développer un contrôle jquery complet et d'apprendre systématiquement webpack.

Structure du répertoire :

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

Remarque : jquery utilise la version 1.12 pour être compatible avec la navigation IE9 Le navigateur utilise le mode Surveillance de Webpack pour l'environnement de développement. Le projet étant relativement petit, pour le débogage, ouvrez simplement le fichier dist/select-tree.html directement avec Chrome.

Code 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' // 方便调试
};

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment implémenter une table à l'aide de jQuery+CSS

Comment implémenter un framework de commentaires à l'aide de Vue

À propos des raisons pour lesquelles l'historique de la v4 n'est pas accessible

Pourquoi réponse.body().string() ne peut-il pas être appelé plusieurs fois ?

Comment implémenter un calendrier à l'aide des composants Vue (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!