您的位置：首页 > Web前端 > JQuery

使用webpack实现jquery按需加载

2016-05-05 00:00 1271 查看

一，初始化项目

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);
}
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Webpack

相关文章推荐

新的分享

章节导航