這次帶給大家怎樣用webpack寫jquery的環境配置，用webpack寫jquery環境配置的注意事項有哪些，下面就是實戰案例，一起來看一下。
客戶需求要一個具備樹狀結構、帶複選框的下拉選擇控制項；在網路上找到了select2、autocomplete都不滿足要求。於是自己用ztree加bootstrap dropdown組合開發了一個下拉樹選擇控制項。決定用webpack打包，開發一個完整的jquery控件，順便系統的學習一下webpack。
目錄結構：
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"
]
}說明：jquery用1.12的版本是為了相容於IE9瀏覽器，開發環境用的webpack's Watch Mode，由於項目比較小，調試就直接用chrome開啟dist/select-tree.html檔。
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' // 方便调试
};相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是怎樣用webpack寫jquery的環境配置的詳細內容。更多資訊請關注PHP中文網其他相關文章！
