webpack配置jquery以及jquery插件

本文介绍了一种使用Webpack打包jQuery及其插件的方法。通过配置Webpack的模块解析规则和加载器,实现了将jQuery及其一系列插件合并到单个文件中。这有助于减少HTTP请求次数并优化前端资源加载效率。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

项目目录大概结构:

project
  |- app
  |   |- vendor
  |   |    |- plugins
  |   |    |    |- plugin-1.js
  |   |    |    |- plugin-2.js
  |   |    |    |- ...
  |   |    |
  |   |    |- jquery.js
  |   |
  |   |- jquery-with-plugins.js
  |   |- main.js
  |
  |- js
  |   |- bundle.js
  |
  |- webpack.config.js
  |- package.json
 ...
 

关键文件内容:

// app/jquery-with-plugins.js
require('vendor/jquery');
req = require.context('vendor/plugins', true, /\.js$/);
req.keys().forEach(function (plugin) {
  req(plugin);
});

module.exports = jQuery;

// app/main.js
var $ = require('jquery');

$(function () {
  $('.selector-1').use_plugin_1();
  $('.selector-2').use_plugin_2();
});

// webpack.config.js
var path = require('path');

module.exports = {
  context: path.join(__dirname, 'app'),
  entry: './main',
  output: {
    path: path.join(__dirname, 'js'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        include: [
          path.join(__dirname, 'app/vendor')
        ],
        loader: 'script'
      }
    ]
  },
  resolve: {
    alias: {
      'jquery$': path.join(__dirname, 'app/jquery_with_plugins'),
      'vendor': path.join(__dirname, 'app/vendor')
    }
  },
  extensions: ['', '.js']
};

// package.json
{
  "name": "temp",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "webpack --progress --colors"
  },
  "devDependencies": {
    "node-libs-browser": "^0.5.0",
    "script-loader": "^0.6.1",
    "webpack": "^1.9.4"
  }
}

关于其他webpack优化可以看看这里

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值