• 像 nodejs 一样模块化开发
    • entry
    • output
    • filename
    • 源码和构建结果

    像 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。