请问怎样通过AMD方式加载Webpack打包的文件？

发布于
2016-10-12

新手上路，请多包涵

我希望将项目中的小功能模块打包，在其他地方调用，就像下边这样。

app/src/app1.js

define([
    'jquery'
], function ($) {
    'use strict';

    return {
        test:function(){
            $("body").append("testdata");
        }
    };
});

以上是一段简单代码，我想把它封装起来在别的地方调用

app/src/app2.js

define([
    '../../build/app1'
], function (app1) {
    'use strict';

    app1.test();
});

这是调用的代码，我把之前的代码打包到build目录下然后通过requirejs加载它

打包代码是：

var webpack = require('webpack');
module.exports = {
    output: {
        path: 'build',
        filename: '[name].js',
    },
    entry: {
        app1: './app/src/app1.js',
        app2: "./app/src/app2.js"
    },
    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./manifest.json'),
        }),
    ],
};

打包成功了，但是经测试发现app1没有加载成功，test这个方法不存在，请问是怎么回事，谢谢。

打包后的app1.js

/******/ (function(modules) { // webpackBootstrap
/******/     // The module cache
/******/     var installedModules = {};

/******/     // The require function
/******/     function __webpack_require__(moduleId) {

/******/         // Check if module is in cache
/******/         if(installedModules[moduleId])
/******/             return installedModules[moduleId].exports;

/******/         // Create a new module (and put it into the cache)
/******/         var module = installedModules[moduleId] = {
/******/             exports: {},
/******/             id: moduleId,
/******/             loaded: false
/******/         };

/******/         // Execute the module function
/******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/         // Flag the module as loaded
/******/         module.loaded = true;

/******/         // Return the exports of the module
/******/         return module.exports;
/******/     }


/******/     // expose the modules object (__webpack_modules__)
/******/     __webpack_require__.m = modules;

/******/     // expose the module cache
/******/     __webpack_require__.c = installedModules;

/******/     // __webpack_public_path__
/******/     __webpack_require__.p = "";

/******/     // Load entry module and return exports
/******/     return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {

    var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [
        __webpack_require__(1)
    ], __WEBPACK_AMD_DEFINE_RESULT__ = function ($) {
        'use strict';

        return {
            test:function(){
                $("body").append("testdata");
            }
        };
    }.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));

/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {

    module.exports = (__webpack_require__(2))(1);

/***/ },
/* 2 */
/***/ function(module, exports) {

    module.exports = lib;

/***/ }
/******/ ]);

打包后的app2.js

/******/ (function(modules) { // webpackBootstrap
/******/     // The module cache
/******/     var installedModules = {};

/******/     // The require function
/******/     function __webpack_require__(moduleId) {

/******/         // Check if module is in cache
/******/         if(installedModules[moduleId])
/******/             return installedModules[moduleId].exports;

/******/         // Create a new module (and put it into the cache)
/******/         var module = installedModules[moduleId] = {
/******/             exports: {},
/******/             id: moduleId,
/******/             loaded: false
/******/         };

/******/         // Execute the module function
/******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/         // Flag the module as loaded
/******/         module.loaded = true;

/******/         // Return the exports of the module
/******/         return module.exports;
/******/     }


/******/     // expose the modules object (__webpack_modules__)
/******/     __webpack_require__.m = modules;

/******/     // expose the module cache
/******/     __webpack_require__.c = installedModules;

/******/     // __webpack_public_path__
/******/     __webpack_require__.p = "";

/******/     // Load entry module and return exports
/******/     return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {

    var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [
        __webpack_require__(3)
    ], __WEBPACK_AMD_DEFINE_RESULT__ = function (app1) {
        'use strict';

        app1.test();
    }.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));

/***/ },
/* 1 */,
/* 2 */,
/* 3 */
/***/ function(module, exports) {

    /******/ (function(modules) { // webpackBootstrap
    /******/     // The module cache
    /******/     var installedModules = {};

    /******/     // The require function
    /******/     function __webpack_require__(moduleId) {

    /******/         // Check if module is in cache
    /******/         if(installedModules[moduleId])
    /******/             return installedModules[moduleId].exports;

    /******/         // Create a new module (and put it into the cache)
    /******/         var module = installedModules[moduleId] = {
    /******/             exports: {},
    /******/             id: moduleId,
    /******/             loaded: false
    /******/         };

    /******/         // Execute the module function
    /******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

    /******/         // Flag the module as loaded
    /******/         module.loaded = true;

    /******/         // Return the exports of the module
    /******/         return module.exports;
    /******/     }


    /******/     // expose the modules object (__webpack_modules__)
    /******/     __webpack_require__.m = modules;

    /******/     // expose the module cache
    /******/     __webpack_require__.c = installedModules;

    /******/     // __webpack_public_path__
    /******/     __webpack_require__.p = "";

    /******/     // Load entry module and return exports
    /******/     return __webpack_require__(0);
    /******/ })
    /************************************************************************/
    /******/ ([
    /* 0 */
    /***/ function(module, exports, __webpack_require__) {

        var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [
            __webpack_require__(1)
        ], __WEBPACK_AMD_DEFINE_RESULT__ = function ($) {
            'use strict';

            $("body").append("testdata");
        }.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));

    /***/ },
    /* 1 */
    /***/ function(module, exports, __webpack_require__) {

        module.exports = (__webpack_require__(2))(1);

    /***/ },
    /* 2 */
    /***/ function(module, exports) {

        module.exports = lib;

    /***/ }
    /******/ ]);

/***/ }
/******/ ]);

ps：项目比较老，以前都是用requirejs打包的，现在希望换到webpack中，但以前的代码很难修改了。

webpack amd模块加载

阅读 7.1k

3 个回答

得票最新

laden666666

发布于
2017-06-03

更新于
2017-06-04

新手上路，请多包涵

webpack是一个模块打包工具，而不是一个模块加载工具（如requirejs），显然你是没有明白模块打包工具和模块加载工具的区别。简单和你说一下他们的区别，模块加载工具是用来加载模块化的文件的；模块打包工具则是将多个模块化的文件打包为一个文件。相同点是他们处理的文件都是需要基于模块化标准书写的；不同点是一个是加载，一个是打包，二者意义完全不同。

举一个例子，你可以看看jquery的源码。jquery的源代码就是遵循amd规范书写的，但是最终打包后的代码却完全没有amd模块的影子，同时打包出来的代码也不能直接被amd的工具（如requirejs）加载，这说明jquery文件也不尊寻amd规范。

jquery的源代码遵循amd规范，源代码打包出的文件却不支持amd规范，这个例子很好的说明模块化打包工具的作用 ———— 将多个模块化的文件打包为一个文件。

所以webpack和requirejs完全是两个东西，因此webpack并不能完全取代requirejs工作。

再来看看你的错误，如果你仔细看你打包后的两个文件，你就会发现dist/app1.js包含app/src/app1.js模块；而dist/app2.js包含app/src/app1.js、app/src/app2.js两个模块。因此你根本不需要生成dist/app1.js，dist/app2.js已经包含了所有你需要的模块了（联想打包的意义）。我猜测你是用requirejs去加载他们，这样肯会出现错误，因为dist/app1.js、dist/app2.js根本就不是一个amd文件，不能被requirejs加载。事实上，你直接用script标签引用dist/app2.js就能得到想要的结果了。

那么问题又来了，将原先用基于requirejs的项目，改用webpack打包后的文件加载效率会比原来加载效率更高吗？他们能不能配合使用呢？

requirejs项目改用webpack打包后的文件加载效率会提高吗？

答案是具体项目具体分析，但是绝大多数项目中，这样做会让页面效率非但没有增加，反而会降低。这是因为打成一个文件仅是实现了减少请求数这一个优化点，但是会带来不利于缓存、无法懒加载等问题，而且还可能出现将一个模块被反复打包到不同输出文件的情况（如你犯的错误一样，dist/app1.js和dist/app2.js重复打包了app/src/app1.js）。因此，在webpack打包中出现了很多优化手段，比如异步加载、提取css文件、提取通用文件、多页面多入口打包等等。如果你不了解这些优化手段，那么用webpack开发的页面肯定还不如用requirejs加载的效率高。所有基于requirejs开发的项目想要迁移到webpack上不是一件容易的事情。

webpack不能和requirejs配合使用吗？

答案是可以的，webpack是打包工具，他打包出的文件也是可以具备模块化的。重点是output.libraryTarget配置项，使用这个配置项，可以打包出amd或者umd的模块，他们都支持和requirejs集成。我们完全可以做到先用webpack将小模块打包成大模块，再用requirejs加载这些大模块。

边喝果汁边聊天

414

发布于
2017-06-04

新手上路，请多包涵

在output中加入：libraryTarget: "umd",library: "[name]",即可

output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js',
        libraryTarget: "umd",
        library: "[name]",
        publicPath: "/dist/"
    }

打包出来的文件是个标准库，可在AMD,COMMONJS,ES6等协议中调用

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

请问怎样通过AMD方式加载Webpack打包的文件？

requirejs项目改用webpack打包后的文件加载效率会提高吗？

webpack不能和requirejs配合使用吗？

你尚未登录，登录后可以

yarn安装包后报错，怎么解决？

webpack 的 Tree Shaking 未删除没有被使用的图片，如何解决？

el-menu-item遍历对象数组渲染图片？

如何在splitChunksPlugin中处理未重叠chunks中的module删除问题？

style-loader的pitch方法如何引入css-loader处理结果？

webpack打包器更换rsbuild?

Webpack 5 如何加速热更新到秒级？