文档章节

使用webpack实现jquery按需加载

上官胡闹
 上官胡闹
发布于 2016/05/05 17:18
字数 174
阅读 291
收藏 2

一,初始化项目

npm init

 

二,安装依赖

安装jquery的核心

npm install --save-dev jquery

 

安装jQuery’s Sizzle选择器引擎。

npm install --save-dev sizzle

 

安装amd-define-factory-patcher-loader加载器

npm install --save-dev amd-define-factory-patcher-loader

 

三,webpack文件配置(webpack.config.js)

module.exports = {
    entry: './entry',
    output: {
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: /jquery[\\\/]src[\\\/]selector\.js$/, loader: 'amd-define-factory-patcher-loader' }
        ]
    }
};

 

四,应用实例

test.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery webpack test</title>
    </head>
    <body>
        <script type="text/javascript" src="bundle.js"></script>
    </body>
</html>

 

jquery的使用

var $ = require('jquery/src/core');

 

usage 1:

var $ = require('jquery/src/core');
require('jquery/src/core/init');
require('jquery/src/manipulation');

$('body').append('<p>Success!</p>');

 

usage 2:使用ajax模块

var $ = require('jquery/src/core');
require('jquery/src/ajax');
require('jquery/src/ajax/xhr');

$.ajax({
    url: '?test=1',
    cache: false,
    complete: function(jqXHR, textStatus) {
        console.log(textStatus);
        console.log(jqXHR.responseText);
    }
});

 

 

 

 

 

© 著作权归作者所有

上官胡闹

上官胡闹

粉丝 60
博文 83
码字总数 61266
作品 1
成都
程序员
私信 提问
基于webpack实现react组件的按需加载

随着web应用功能越来越复杂,模块打包后体积越来越大,如何实现静态资源的按需加载,最大程度的减小首页加载模块体积和首屏加载时间,成为模块打包工具的必备核心技能。 webpack作为当下最为...

大灰狼的小绵羊哥哥
2018/11/05
0
0
SeaJS中jQuery插件模块化及其调用方式

jQuery插件本质上是将命名空间挂在全局的jQuery或jQuery.fn上而非使用define定义的模块。 JQuery的这种扩展机制同模块化要求模块的独立性,以及模块互相隔离有点冲突。 jQuery插件数目众多,...

brivio
2014/03/15
7.2K
0
走进webpack(2)--第三方框架(类库)的引入及抽离

  正文之前,由于这是一个系列的文章,可能第一次看到的看官老爷们会觉得突兀,如果你是webpack新手,我建议你先从前几篇文章看起,如果你对webpack有一些了解,也希望可以在github上下载代...

zaking
2018/03/29
0
0
webpack 4.x之搭建前端开发环境

首先将npm更改为cnpm,因为国内的npm有时下载速度很慢,可以安装cnpm,从国内淘宝镜像下载,执行以下命令: 以后npm直接替换成cnpm使用。 在开始搭建前首先看一下我们能从本教程学习到什么. 1...

itwangchen
10/12
0
0
超详细使用webpack4.x搭建标准前端项目

在开始教程前,先看看我们通过本教程能学到什么。 目录 1 小试牛刀 1.1 创建并初始化项目 1.2 创建目录及文件 1.3 修改package.json 1.4 编写项目代码 1.5 配置webpack.config.js 1.6 测试打...

兔子先生🐰
06/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

centos7 安装 mysql5.7 版本(全)

centos 安装 版本说明 :centos7,mysql5.7 ,不是 centos7 可能有些命令不兼容 安装 mysql-server # 下载并安装 mysql yum wget -i -c http://dev.mysql.com/get/mysql57-community-relea......

sanri1993
28分钟前
4
0
Spring3.x升级到Spring4.x-5.x时关于MappingJacksonHttpMessageConverter的报错问题

在Spring4.x或者以上的版本强使用(不然会报错): org.springframework.http.converter.json.MappingJackson2HttpMessageConverter 如果是Spring4.0获者以下的版本可以使用MappingJacksonH...

code-ortaerc
31分钟前
3
0
OSG 渲染状态污染到其它节点怎么解决?

在根节点补上初始状态

洛克人杰洛
32分钟前
3
0
grid 布局 设置行列间距

本文转载于:专业的前端网站➪grid 布局 设置行列间距 <!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="widt......

前端老手
44分钟前
3
0
spring-data-elasticsearch 和 Jackson 配合使用的bug

下面先简单描述项目。 项目依赖: dependencies { implementation group: 'org.springframework.boot', name: 'spring-boot-starter-data-elasticsearch', version: '2.1.0.RELEASE'......

Landas
46分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部