Web Front-end
JS Tutorial
There is environment configuration about jquery plug-in in webpack (detailed tutorial)
There is environment configuration about jquery plug-in in webpack (detailed tutorial)
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"
]
}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('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' // 方便调试
};The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
VUE3 Getting Started Tutorial: Packaging and Building with Webpack
Jun 15, 2023 pm 06:17 PM
Vue is an excellent JavaScript framework that can help us quickly build interactive and efficient web applications. Vue3 is the latest version of Vue, which introduces many new features and functionality. Webpack is currently one of the most popular JavaScript module packagers and build tools, which can help us manage various resources in our projects. This article will introduce how to use Webpack to package and build Vue3 applications. 1. Install Webpack
How to configure python environment variables in Win11? Tips for adding environment variables in win11python
Feb 29, 2024 pm 04:30 PM
Win11 system is the latest Windows operating system, and users may encounter some configuration problems when using it. Among them, configuring Python environment variables is a common requirement because it allows users to easily use Python commands from any location. This article will introduce how to configure Python environment variables in Win11 system so that users can use the Python programming language more conveniently. 1. [Right-click] this computer on the desktop, and select [Properties] in the menu item that opens; 2. Then, under related links, find and click [Advanced System Settings]; 3. In the system properties window, click [Environment] at the bottom Variables]; 4. In the environment variables window, under system variables, select [Path], and then click
What is the difference between vite and webpack
Jan 11, 2023 pm 02:55 PM
Differences: 1. The startup speed of the webpack server is slower than that of Vite; because Vite does not require packaging when starting, there is no need to analyze module dependencies and compile, so the startup speed is very fast. 2. Vite hot update is faster than webpack; in terms of HRM of Vite, when the content of a certain module changes, just let the browser re-request the module. 3. Vite uses esbuild to pre-build dependencies, while webpack is based on node. 4. The ecology of Vite is not as good as webpack, and the loaders and plug-ins are not rich enough.
How to use PHP and webpack for modular development
May 11, 2023 pm 03:52 PM
With the continuous development of web development technology, front-end and back-end separation and modular development have become a widespread trend. PHP is a commonly used back-end language. When doing modular development, we need to use some tools to manage and package modules. Webpack is a very easy-to-use modular packaging tool. This article will introduce how to use PHP and webpack for modular development. 1. What is modular development? Modular development refers to decomposing a program into different independent modules. Each module has its own function.
Learning Go language from scratch: environment configuration is no longer an obstacle
Feb 21, 2024 pm 02:12 PM
Go language is a statically typed, compiled programming language developed by Google. It has a unique position among modern programming languages and is widely used in cloud computing, network programming, big data and other fields. As the Go language becomes more and more popular, more and more programmers are beginning to learn the Go language, hoping to master the features and application skills of this language. However, for learners with zero foundation, the environment configuration of Go language often becomes the first obstacle to their learning. Before learning the Go language, we first need to build a suitable
How does webpack convert es6 to es5 module?
Oct 18, 2022 pm 03:48 PM
Configuration method: 1. Use the import method to put the ES6 code into the packaged js code file; 2. Use the npm tool to install the babel-loader tool, the syntax is "npm install -D babel-loader @babel/core @babel/preset- env"; 3. Create the configuration file ".babelrc" of the babel tool and set the transcoding rules; 4. Configure the packaging rules in the webpack.config.js file.
The Complete Guide to Go Locale Setup: A Walkthrough Guide to Creating a Development Environment
Feb 18, 2024 pm 10:26 PM
As an open source programming language, Go language is favored by more and more developers. Its simplicity, efficiency and cross-platform nature have been widely praised. Before learning and using the Go language, you first need to configure the environment in order to carry out development work smoothly. This article will provide you with a comprehensive Go language environment configuration guide and teach you step by step how to set up a development environment so that you can easily get started with Go language development. 1. Install Go language First, we need to download and install the latest version of Go language. You can find it on the Go official website
A must-read for Python developers: PyCharm environment configuration guide
Feb 23, 2024 pm 01:57 PM
PyCharm is an integrated development environment (IDE) commonly used by many Python developers. It provides a wealth of functions and tools to facilitate developers to write, debug and test Python code efficiently. Before using PyCharm for development, an important step is to configure the PyCharm environment. This article will provide Python developers with a PyCharm environment configuration guide, including installing PyCharm, configuring the Python interpreter, setting up a virtual environment, etc. It will also come with tools.
