使用webpack实现jquery按需加载

最新推荐文章于 2021-12-21 14:34:14 发布

weixin_34088598

最新推荐文章于 2021-12-21 14:34:14 发布

阅读量479

点赞数

文章标签： webpack javascript python ViewUI

原文链接：https://my.oschina.net/u/1760791/blog/670323

版权

2019独角兽企业重金招聘Python工程师标准>>>

一，初始化项目

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

转载于:https://my.oschina.net/u/1760791/blog/670323