Maison > interface Web > js tutoriel > le corps du texte

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

亚连
Libérer: 2018-06-19 14:51:33
original
1720 Les gens l'ont consulté

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"
 ]
}
Copier après la connexion

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' // 方便调试
};
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!