webpack 是不是只适合打包结构复杂，模块较多的项目？

发布于 2022-09-04 12:44:58 字数 3197 浏览 11 评论 0

我尝试着写了一个一句话的js文件让webpack打包，然后打包后的文件多加了一堆代码，看上去是负责模块提取的。

如果让gulp打包，gulp基本上会原封不动地把这个文件打包，打包后也就这一句话（不加插件的话）。
是不是说如果项目结构简单的话用gulp会比较好点，感觉在这种情况下webpack多了很多无用代码。

也许我的描述本身会有问题，我确实不太确定gulp是否可以和webpack类比，因为也有很多人把webpack放在gulp里面使用。但目前公司的业务里我感觉gulp和webpack(+express)是发挥的相同的功能。如果我的理解有问题，也希望大家能给我解惑。

附代码：

/******/ (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] = {
/******/             i: moduleId,
/******/             l: false,
/******/             exports: {}
/******/         };

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

/******/         // Flag the module as loaded
/******/         module.l = 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;

/******/     // identity function for calling harmony imports with the correct context
/******/     __webpack_require__.i = function(value) { return value; };

/******/     // define getter function for harmony exports
/******/     __webpack_require__.d = function(exports, name, getter) {
/******/         if(!__webpack_require__.o(exports, name)) {
/******/             Object.defineProperty(exports, name, {
/******/                 configurable: false,
/******/                 enumerable: true,
/******/                 get: getter
/******/             });
/******/         }
/******/     };

/******/     // getDefaultExport function for compatibility with non-harmony modules
/******/     __webpack_require__.n = function(module) {
/******/         var getter = module && module.__esModule ?
/******/             function getDefault() { return module['default']; } :
/******/             function getModuleExports() { return module; };
/******/         __webpack_require__.d(getter, 'a', getter);
/******/         return getter;
/******/     };

/******/     // Object.prototype.hasOwnProperty.call
/******/     __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };

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

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

var txt = 'Hello world!' // 这句是我原文件写的。


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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

迷离° 2022-09-11 12:44:58

webpack当然可以用于打包结构不那么复杂，模块不那么多的项目。但是这样的用法肯定没有发挥webpack的优势。

我觉得gulp和webpack的侧重点还是不一样。

webpack更侧重于打包(module bundler)。以js文件为入口，将你的图片,样式等内容也当做module打包进来，根据你的配置可以拆分成一个一个的chunk.然后这些chunk之间有一定的依赖关系。这应该是webpack最核心的东西：分析不同模块之间的依赖关系，并抽成一个一个的chunk。

举个非常简单的例子：lazyload(懒加载)
webpack1.x和webpack2里面都提供了分包异步加载文件的API.在你通过webpack完成构建后，webpack会根据你需要进行异步加载的配置信息输出单独的一个chunk。
在你一般进行单页应用开发的时候，有时候需要到特定的路由才需要这个chunk文件，那么webpack已经帮你完成了这个chunk抽离的工作。而gulp是做不到这一点

具体的webpack1.x和webpack2的分包及异步加载的套路可以看我写的2篇blog:

另外就是楼主给的demo说出现了很多无用代码，我觉得可能是楼主没有具体的分析webpack将代码打包编译后是怎么执行的。除了你自己的写的代码，上面输出的一坨东西都是webpack编译后的runtime代码，主要提供了模块的加载,模块的缓存，模块的执行等等一系列的方法。

回复收藏 0