Heim  >  Artikel  >  Web-Frontend  >  Es gibt eine Umgebungskonfiguration für das JQuery-Plug-In im Webpack (ausführliches Tutorial).

Es gibt eine Umgebungskonfiguration für das JQuery-Plug-In im Webpack (ausführliches Tutorial).

亚连
亚连Original
2018-06-19 14:51:331761Durchsuche

Dieser Artikel informiert Sie über die Umgebung und Konfiguration, die für die Entwicklung von JQuery-Plug-Ins mit Webpack erforderlich sind. Leser mit Bedarf können darauf zurückgreifen.

Der Kunde benötigt eine Dropdown-Auswahlsteuerung mit Baumstruktur und Kontrollkästchen. Ich habe select2 und Autocomplete im Internet gefunden, aber keines davon erfüllte die Anforderungen. Deshalb habe ich eine Dropdown-Baumauswahlsteuerung entwickelt, die eine Kombination aus Ztree- und Bootstrap-Dropdown verwendet. Ich beschloss, Webpack zum Packen zu verwenden, eine vollständige JQuery-Steuerung zu entwickeln und Webpack systematisch zu erlernen.

Verzeichnisstruktur:

package.json-Konfiguration:

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

Hinweis: jquery verwendet Version 1.12, um mit IE9-Webpacks kompatibel zu sein Der Überwachungsmodus wird in der Entwicklungsumgebung verwendet. Da das Projekt relativ klein ist, verwenden Sie zum Debuggen einfach Chrome, um die Datei dist/select-tree.html direkt zu öffnen.

webpack.config.js-Code:

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

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie eine Tabelle mit jQuery+CSS

So implementieren Sie ein Kommentar-Framework mit Vue

Über die Gründe, warum auf den v4-Verlauf nicht zugegriffen werden kann

Warum kann Response.body().string() nicht mehrmals aufgerufen werden?

So implementieren Sie einen Kalender mit Vue-Komponenten (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonEs gibt eine Umgebungskonfiguration für das JQuery-Plug-In im Webpack (ausführliches Tutorial).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn