webpack을 사용하여 jquery 환경 구성을 작성하는 방법-JS 튜토리얼-php.cn

webpack을 사용하여 jquery 환경 구성을 작성하는 방법

php中世界最好的语言

풀어 주다： 2018-03-15 14:52:11

원래의

2162명이 탐색했습니다.

이번에는 webpack을 사용하여 jquery 환경 구성을 작성하는 방법과 webpack을 사용하여 jquery 환경 구성을 작성할 때의 주의 사항에 대해 설명하겠습니다. 다음은 실제 사례입니다.

고객은 트리 구조와 확인란이 있는 드롭다운 선택 컨트롤이 필요합니다. 인터넷에서 select2와 자동 완성 기능을 찾았지만 둘 다 요구 사항을 충족하지 못했습니다. 그래서 ztree와 bootstrap 드롭다운의 조합을 사용하여 드롭다운 트리 선택 컨트롤을 개발했습니다. 패키징에는 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는 IE9 브라우저와 호환되도록 버전 1.12를 사용하며, 개발 환경에서는 상대적으로 프로젝트 규모가 작기 때문에 webpack의 Watch 모드를 사용합니다. , 디버깅은 간단합니다. 크롬을 사용하여 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!