像 nodejs 一样模块化开发

在线预览构建结果页面

  1. webpack --watch

shell log

  1. // webpack.config.js
  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 规范中定义一个文件对外接口的语法，webpack.config.js 文件对外的接口是一个 object ，其中定义了一些配置参数。

entry

最初 webpack 是为了构建 SPA (Single Page Application) ，entry 是『入口』配置。在 entry 中的文件才会被编译。

output

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

filename

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

源码和构建结果

  1. // index.js
  2. var content = require("./content.js")
  4. document.body.innerHTML = document.body.innerHTML + content
  1. // content.js
  2. module.exports = "some string"
  1. <body>
  2. <a target="_blank" href="https://github.com/nimojs/webpack-book/blob/gh-pages/1-modules/README.md">本例说明</a>
  3. <script src="index.b.js"></script>
  4. </body>

建议尽量理解构建后的代码，这样有助于理解 webpack

  1. /******/ (function(modules) { // webpackBootstrap
  2. /******/     // The module cache
  3. /******/     var installedModules = {};
  5. /******/     // The require function
  6. /******/     function __webpack_require__(moduleId) {
  8. /******/         // Check if module is in cache
  9. /******/         if(installedModules[moduleId])
  10. /******/             return installedModules[moduleId].exports;
  12. /******/         // Create a new module (and put it into the cache)
  13. /******/         var module = installedModules[moduleId] = {
  14. /******/             exports: {},
  15. /******/             id: moduleId,
  16. /******/             loaded: false
  17. /******/         };
  19. /******/         // Execute the module function
  20. /******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  22. /******/         // Flag the module as loaded
  23. /******/         module.loaded = true;
  25. /******/         // Return the exports of the module
  26. /******/         return module.exports;
  27. /******/     }
  30. /******/     // expose the modules object (__webpack_modules__)
  31. /******/     __webpack_require__.m = modules;
  33. /******/     // expose the module cache
  34. /******/     __webpack_require__.c = installedModules;
  36. /******/     // __webpack_public_path__
  37. /******/     __webpack_require__.p = "";
  39. /******/     // Load entry module and return exports
  40. /******/     return __webpack_require__(0);
  41. /******/ })
  42. /************************************************************************/
  43. /******/ ([
  44. /* 0 */
  45. /***/ function(module, exports, __webpack_require__) {
  47.     var content = __webpack_require__(1)
  49.     document.body.innerHTML = document.body.innerHTML + content
  51. /***/ },
  52. /* 1 */
  53. /***/ function(module, exports) {
  55.     module.exports = "some string"
  57. /***/ }
  58. /******/ ]);

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

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