javascript - webpack能否解决加载时的依赖问题

问题描述

问 题

比如在某个多页面项目中，有个a.js依赖jQuery，因为jQuery在每个页面中都被使用了，所以不能将a.js与jQuery打包在一起。

当a.js与jQuery都通过async的方式加载时，并不能保证jQuery会在a.js之前加载完，该如何解决这个问题。

在require.js中据说是通过每个script的onload事件来判断的，不晓得webpack有没有这方面的解决方案。

解决方案

可以用 require.ensure， 或者在webpack中直接使用AMD风格的require.

webpack2已经支持了AMD风格加载异步模块，详情参见：https://webpack.github.io/doc...

---- 补充个荔枝： ---

实测可以这样写：

源代码：

// 
(function (){
    console.log("page loaded....")

    require(['jquery', 'lodash'], function($, _){
        console.log("jquery: ", $)
        console.log('lodash: ', _)
    })

})()

构建后：

 (function(module, __webpack_exports__, __webpack_require__) {

        "use strict";
        Object.defineProperty(__webpack_exports__, "__esModule", {
            value: true
        });
        /* harmony import */
        var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_typeof__ = __webpack_require__(67);
        /* harmony import */
        var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_typeof___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_typeof__);

        console.log("page loaded....");

        console.log("do something before load jquery...");

        __webpack_require__.e /* require */
        (17).then(function() {
            var __WEBPACK_AMD_REQUIRE_ARRAY__ = [__webpack_require__(479), __webpack_require__(331)];
            (function($, _) {
                console.log("jquery and loadash loaded: ");
                console.log("jquery: ", typeof $ === "undefined" ? "undefined" : __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_typeof___default()($));
                console.log('lodash: ', typeof _ === "undefined" ? "undefined" : __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_typeof___default()(_));
            }
            .apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__));
        }).catch(__webpack_require__.oe);

        console.log("do something else, now jquery and lodash are not loaded.");
        console.log("jquery: ", typeof $ === "undefined" ? "undefined" : __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_typeof___default()($));
        console.log('lodash: ', typeof _ === "undefined" ? "undefined" : __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_typeof___default()(_));

        /***/
    })

console输出：

这篇关于javascript - webpack能否解决加载时的依赖问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！