如何将旧版jQuery插件与webpack捆绑在一起

时间:2016-02-02 00:25:26

标签: javascript webpack

我正在尝试优化我开发的Web应用程序的一些页面,第一个显而易见的事情是将js库捆绑在一起。但是我无法通过webpack实现这一目标。作为一个例子,我有一个Feed.html页面使用下面的库(为简洁起见,保持列表简短):

  • 插件/ SELECT2 / 3.5.4 / select2.min.js
  • 插件/自举-daterangepicker / 2.0.11 / moment.min.js
  • 插件/自举-daterangepicker / 2.0.11 / daterangepicker.js

我希望webpack创建一个包含这些文件的包并将其命名为Feed.js,这样我就可以单独包含这个单独的js文件而不是每个文件。

由于我们使用的大多数插件都是遗留插件,因此它们不遵守CommonJS / AMD / UMD模式,并且可以在页面上用作简单的<script>标记。鉴于我已经找到了webpack的script-loader信息,但它似乎没有做任何事情。

页/ Feed.js

require("script!../plugins/select2/3.5.4/select2.min.js");
require("script!../plugins/bootstrap-daterangepicker/2.0.11/moment.js");
require("script!../plugins/bootstrap-daterangepicker/2.0.11/daterangepicker.js");

webpack.config.js

module.exports = {
    entry: {
        Feed: './Page/Feed.js'
    },
    output: {
        filename: '[name].js',
        path: './Bundles/'
    },
};

捆绑/ Feed.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__) {

        __webpack_require__(1)(__webpack_require__(2))

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

        /*
            MIT License http://www.opensource.org/licenses/mit-license.php
            Author Tobias Koppers @sokra
        */
        module.exports = function(src) {
            if (typeof execScript === "function")
                execScript(src);
            else
                eval.call(null, src);
        }

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

        module.exports = "require(\"script!../plugins/select2/3.5.4/select2.min.js\");\r\nrequire(\"script!../plugins/bootstrap-daterangepicker/2.0.11/moment.js\");\r\nrequire(\"script!../plugins/bootstrap-daterangepicker/2.0.11/daterangepicker.js\");\r\n\r\n"

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

似乎webpack只是在包中输出Page/Feed.js作为字符串。我怎样才能实现这些文件的连接?

0 个答案:

没有答案