像 nodejs 一样模块化开发

    2. module.exports = {
    3.     // 入口
    4.     entry: {
    5.         'index': './index.js'
    6.     },
    7.     // 输出
    8.     output: {
    9.         path: './',
    10.         /*
    11.             [name] 是 entry 中的 key
    12.             entry: {
    13.                 key: value
    14.             }
    15.         */
    16.         filename: "[name].b.js"
    17.     }
    18. };

    module.exports 是 CommonJS 规范中定义一个文件对外接口的语法， 文件对外的接口是一个 object ，其中定义了一些配置参数。

    output 控制构建后的文件的存放位置和命名。 path 定义所有构建后文件的所在目录，本例中构建到当前文件夹。

    filename 控制构建后文件的文件名

    1. // content.js
    2. module.exports = "some string"
    1. /******/ (function(modules) { // webpackBootstrap
    2. /******/     // The module cache
    4. /******/     // The require function
    5. /******/     function __webpack_require__(moduleId) {
    7. /******/         // Check if module is in cache
    8. /******/         if(installedModules[moduleId])
    9. /******/             return installedModules[moduleId].exports;
    11. /******/         // Create a new module (and put it into the cache)
    12. /******/         var module = installedModules[moduleId] = {
    13. /******/             exports: {},
    14. /******/             id: moduleId,
    15. /******/             loaded: false
    16. /******/         };
    18. /******/         // Execute the module function
    19. /******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
    21. /******/         // Flag the module as loaded
    22. /******/         module.loaded = true;
    24. /******/         // Return the exports of the module
    25. /******/         return module.exports;
    26. /******/     }
    29. /******/     __webpack_require__.m = modules;
    31. /******/     // expose the module cache
    32. /******/     __webpack_require__.c = installedModules;
    34. /******/     // __webpack_public_path__
    35. /******/     __webpack_require__.p = "";
    37. /******/     // Load entry module and return exports
    38. /******/     return __webpack_require__(0);
    39. /******/ })
    40. /************************************************************************/
    41. /******/ ([
    42. /* 0 */
    43. /***/ function(module, exports, __webpack_require__) {
    45.     var content = __webpack_require__(1)
    47.     document.body.innerHTML = document.body.innerHTML + content
    49. /***/ },
    50. /* 1 */
    51. /***/ function(module, exports) {
    53.     module.exports = "some string"
    55. /******/ ]);

    前面带 /**/ 的代码都是 webpack 的模块化代码，它内置了一个模块加载器

    模块 0 是 index.js 的代码，模块 1 是 的代码。如果你再 require 一个模块那么就会有模块 3。