使用webpack實現jquery按需加載

時間 2019-11-11

標籤使用 webpack 實現 jquery 按需加載欄目 JQuery 简体版

原文原文鏈接

一，初始化項目javascript

npm init

二，安裝依賴html

安裝jquery的核心java

npm install --save-dev jquery

安裝jQuery’s Sizzle選擇器引擎。jquery

npm install --save-dev sizzle

安裝amd-define-factory-patcher-loader加載器webpack

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

三，webpack文件配置（webpack.config.js）web

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

四，應用實例ajax

test.htmlnpm

<!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的使用app

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

usage 1:ui

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。